DEV Community: Brittan McGinnis

How To Use the CSS Transform Property

Brittan McGinnis — Tue, 08 May 2018 11:44:17 +0000

How To Use the CSS Transform Property

I’m setting out to learn CSS animations and the transform property was the second piece on my list.
My goal of this post is to teach (so that I can better learn), the very basics of transform.
This property is super cool and was actually pretty fun to learn. I would suggest playing around with it if you are not familiar.

Basics

You should have a basic understanding of CSS and HTML prior to reading this article.

Introduction

This journey that I’m on to learn CSS animations has a super important learning element to it. I basically find and filter information pertaining to this concept. Make a list of learning comprehensions that need to be understood before I can say I “know” the thing. Do those things, be it reading articles, doing exercises, watching videos, reading books, etc. one by one. Then I play around. I have no set goal when doing this. Just to play in the most basic sense. Break stuff. Have fun. Mostly this step is to develop questions. Then research and answer my questions. Then teach. That could be a blog post, teaching a friend or just explaining in depth the concept.

During this post I may gloss over some other concepts. This post is mainly just for the CSS transform property. However, I will be using the transition property quite a bit as well. If you would like to read further on that, I have another blog post for that.

Transforms

CSS transform has 6 main property values:

scale
translate
rotate
skew
perspective
matrix

In truth it has way more, because many of those values have an X, Y and Z property. For the sake of brevity though, I will not display that entire list. If you would like to take a look, you can see it [here].

I’ll explain below what each one of the values does.

Lets play with these

Below, I’ll build 7 examples cards. Each will perform the animation that it’s named.

Starter Code

<div class="container">
  <div class="translate">
    <p>translate</p>
  </div>  
</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
  background: lightblue;
  font-family: 'Open Sans';
}

.translate {
  margin: 50px auto;
  background: papayawhip;
  width: 150px;
  height: 150px;
  border-radius: 20px;
}

p {
  margin-top: 60px;
}

Adds hover psuedo class

This moves the element down the Y axix 100px. While kinda cool and useful depending on your use case, it is not very graceful and does not animate very nicely. Next we'll add a transition to make this animate smoothly.

// ...

.translate:hover {
  transform: translateY(100px);
}

// ...

.translate {
  // ...
  transition: 1s ease;
}

.translate:hover {
  transform: translateY(100px);
}

Scale

Add a duplicate of the previous div and name the class to the property that we will be changing.
I will not include this code for the following examples as it is the same.

<div class="container">
  <div class="translate">
    <p>translate</p>
  </div>  
  <div class="scale">
    <p>scale</p>
  </div>  
</div>

Here we'll add a text-align center to the .container so the elements will be in the center of this container.
Then we'll change the margin and display properties so they sit next to each other.

// ...
.container {
  text-align: center;
}

.translate, .scale {
  margin: 50px 10px auto;
  display: inline-block;
  background: papayawhip;
  width: 150px;
  height: 150px;
  border-radius: 20px;
  transition: 1s ease;
}

p {
  margin-top: 60px;
}

// ...

Then we'll add a scale property on hover. This will shrink it to 1/2 of it's original size. Because I only provide one value it uses that value for both the x and y coordinates.

// ...
.scale:hover {
  transform: scale(.5);
}

If I provide it a second value then it will apply the value to the x and y coordinates respectively.

// ...
.scale:hover {
  transform: scale(.5, 2);
}

Rotate

After you have duplicated the html and renamed the class and inner text for the p tag to rotate, then add the rotate class to our base styling for our divs like so:
.translate, .scale, .rotate {

Then we'll add an :active psuedo class to the .rotate class. This way when we click on that element it rotates.
The rotate value takes a turn value or a degree value.

rotate takes a negative or positive value. If you were to give this transform: rotate(-360deg) for example it would turn counter-clockwise

// ...

.rotate:active {
  transform: rotate(360deg);
}

// This accomplishes the same thing as above
.rotate:active {
  transform: rotate(1turn);
}

Skew

The skew value will 'tilt' the element to one side depending on the value given. As with many of these functions you can specify either scaleX, scaleY or scale. If you pass in only one value to scale() it will give the Y axis a 0 value which will then only scale the X axis.

The skew value also takes degree values, turns or radius as parameters. This signature looks like this: skew(10deg) or skew(-0.06turn, 18deg) or skew(.312rad). Taken from the MDN docs

Skew can be a little tricky because you may only want to skew the container of an element and not the inner content. In that case you will have to skew in reverse.

Below you can see an example of skewing the div but keeping the text inside un-skewed.

We'll duplicate our html, change our class name and our inner text like so <p>skew</p>
We'll add .skew to our growing list of elements targeted in our base CSS

Now we'll add a skew value to this element.

// ...

.skew:hover {
   transform: skew(10deg)
}

Problem with this is that it skews the inner text as well. We can remedy that by giving it an inverse value of the same amount and targeting that element.

.skew:hover p {
  transform: skew(-10deg);
}

This is still kind of weird looking because the text corrects itself on hover. I'm not sure if there is a more natural way to fix this. I couldn't come up with one in this contrived example. If any reader has a better way please let me know in the comments.

Perspective

The perspective value is used to give some perspective to 3d elements. You are targeting the z-index so that it looks as thought the element is popping out of the page. The point that the perspective originates from is the center. You can alter this using the perspective-origin value. I will however use the transform-origin property because I am using this on the transform property and on the perspective property.

For this example I will use both the perspective and the transform-origin values. I'll make it look as though the card is flipping up and out from the bottom.

Copy the code from the last example and add the respective class and supporting css.

Then add this to the hover state.

// ...
.perspective {
  transform-origin: top;
}

.perspective:hover {
  transform: perspective(300px) rotateX(50deg);
}

Matrix

The matrix function is a little more complex and admittedly the one that I spent the least amount of time playing with. Also it requires that you have a pretty good understanding of linear algebra and the Cartesian coordinates system (which I do not), in order to really understand what is going on.

There is both a matrix and a matrix3d function. The matrix function is behind every transform function. For example, when you are calling rotateX(30deg), you are actually saying matrix(0.86602540, 0.50000000, -0.50000000, 0.86602540, 0, 0);. There is a cool matrix calculator for rotate here, where you can see the value of your rotation.

2d transforms are a 3x3 matrix of integers where 3d transforms are a 4x4 matrix. Hence the arguments passed to each function respectively.

Big thanks to this deep dive article Understanding the CSS Transforms Matrix by Tiffany Brown.

Here I'll make this card flip up and out to the left using the matrix function.

We'll add our html and css same as with the previous cards, then you can add this :hover state to the .matrix class

// ...
.matrix:hover {
  transform: matrix(.5, -1, 0, .5, 0, 0);
}

The matrix3d can create the illusion of 3 dimensions in 2 dimensions using CSS. The signature takes 16 arguments as coordinates.

I'll copy all the stuff I just did for Matrix and just add 3d to the class name and text. Then we'll rotate this card up, right and out at the bottom using the matrix3d function. We'll do this on the :active psuedo class.

// ...
.matrix3d:active {
  transform: matrix3d(0.8535533905932737, 0.4999999999999999, 0.14644660940672619, 0, -0.4999999999999999, 0.7071067811865476, 0.4999999999999999, 0, 0.14644660940672619, -0.4999999999999999, 0.8535533905932737, 0, 22.62994231491119, -20.3223304703363, 101.3700576850888, 1);
}

Below is a pen of all these examples.

Conclusion

I would love to hear any feedback that anyone has about my understanding of the transform property. I wrote this post to re-enforce my knowledge of this concept. If I have made any glaring errors please let me know. I will gladly update this post with the correct information.

This is a Cross Post from Medium

How to use the CSS transition property

Brittan McGinnis — Wed, 11 Apr 2018 03:33:14 +0000

Photo by Sabri Tuzcu on Unsplash

How to use the CSS `transition` property

Or how I understand CSS transitions

I'm on a journey to learn CSS animations and I decided to start with the CSS transition property.

Before reading through this you should have a basic understanding of HTML and CSS.

This will cover the CSS transition property in as much depth as I feel I can go into. There will be other concepts thrown in here but I will gloss over them for now. This should be relatively basic and easy to understand, as I found this particular property pretty easy to understand.

There are 4 transition animation properties. They are:

transition-property
transition-duration
transition-timing-function
transition-delay

I'll break down each of these properties here.

transition-property: This is the property that you want to animate. This could be opacity, width, background or any number of different properties. The key thing to understand here is that you are defining what is going to be animated. Something to keep in mind is that not all properties are animatable (not sure if thats a word). A good rule of thumb is that if it has a middle state then you can probably animate it.

	Start State	transitioning	End State
`opacity`	0	0.5 👍	1
`display`	none	no middle state 😢	block

transition-duration: This is how long the animation will take place for. Or how long it will take to complete. Something to keep in mind when you are using this duration is that it's annoying to users if this takes to long. Alternatively it's jarring if it happens to fast or may be imperceptible that it even animated. Try and find a happy medium that feel right and has a purposeful duration.

transition-delay: This is how long it will delay before the animation starts. You may want to have multiple animations happening at the same time but maybe you want to delay your background transition for 0.25s before you start to transition the changing color.

transition-timing-function: This one is a little tricky to understand. Essentially it's the function that you give your animation to perform during this animation.

You have the choice between:

ease - the default value (arguably the most used). Gives a soft start and moves in to the transition.
ease-in - slow in the beginning, fast / abrupt at the end
ease-out - fast/abrupt in the beginning and slow at the end
ease-in-out - Honestly I can't really see a difference between the ease-in function but it basically a mixture of the two above.
linear - same consistent speed all the way through
cubic-bezier - This is a series xy coordinates passed to a function that will map the control points for a timing curve. This one is s little tricky and deserves a more in-depth description than I will provide here. Cubic Bezier

You can shorthand these properties by using the transition property and adding the properties as illustrated below.
transition: [property] [duration] [delay] [timing-function];

Here is an example of a transition on a button element.

We'll start with some HTML and CSS

<!--Start HTML-->
<body>
  <main class="container">
    <button class="btn">Submit</button>
  </main>
</body>

/* Start CSS */
body {
  background: lightblue;
}

.container {
  text-align: center;
}

.btn {
  margin: 20px auto;
  padding: 20px;
  width: 180px;
  border-radius: 20px;
  font-size: 1.4em;
}

Then we'll add color and a hover state

/* ... */

.btn {
  margin: 20px auto;
  padding: 20px;
  width: 180px;
  border-radius: 20px;
  font-size: 1.4em;
  background: papayawhip;
}

.btn:hover {
  background: azure;
}

Then we'll add a transition

/* ... */

.btn {
  margin: 20px auto;
  padding: 20px;
  width: 180px;
  border-radius: 20px;
  font-size: 1.4em;
  background: papayawhip;
  transition: background .5s ease; 
  /* Targets the background property and sets it to ease into the azure color in .5 seconds */
}

.btn:hover {
  background: azure;
}

We can also add a grow animation as well

/* ... */

.btn {
  /* ... */
  transition: background .5s ease .25s, width .25s ease-in-out;
}

.btn:hover {
  background: azure;
  width: 210px;
}

You can see the working example here:

This is a fairly contrived example but I feel like it illustrates a basic use case of this property without adding too much confusion.

Next Steps
I'll be moving onto CSS transformations next. I'm excited to see how I can use both these properties together to make something cool.

Side note

This blog post is part of a learning framework that I am trying to follow. There are several modules that you have to complete for every step of your learning process. Teaching is one of those modules and that is what this blog post is. This framework comes from John Sonmez' 10 steps to learn anything quickly. John's Course. I don't make any money if you buy this as I am not affiliated in any way. I do highly recommend it though.