The transform property is a powerful tool to change the appearance of elements without affecting the natural document flow.
You have likely seen it in action on many of your favorite websites! Transforms are very commonly used for animated effects. While we are sure you'll like to create sleek animations of your own, we first need to understand how transforms work.
By the end of this lesson, you will know:
- How to use 2D transforms.
- How to use 3D transforms.
- How to chain multiple transforms.
- The benefits of using the
transformproperty.
The transform property takes in one or more CSS transform functions as its values, with those functions taking in their own value, usually an angle or a number.
Almost all elements can have the transform property applied to it, with the exceptions being <col>, <colgroup>, and non-replaced inline elements. "Non-replaced" simply refers to elements whose content is contained within the HTML document (<span>, <b>, and <em>, for example), as opposed to a "replaced" element's content being contained outside of the document (<a>, <iframe>, and <img>, for example). You do not need to memorize every element that is non-replaced, but rather keep this knowledge in mind should you try to apply the transform property to an element and aren't sure why it isn't working.
In this section, we'll go through 2D transforms with the following transform functions: rotate, scale, skew, and translate.
This is the transform function value to rotate an element on a 2D plane:
.element {
transform: rotate();
}Below is a CodePen that shows how the value affects the target element.
See the Pen 2D Rotate | CSS Transform by TheOdinProject (@TheOdinProjectExamples) on CodePen.
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>These are the transform function values to scale an element on a 2D plane:
.element {
transform: scaleX();
transform: scaleY();
transform: scale();
}Below is a CodePen that shows how each value affects the target element.
See the Pen 2D Scale | CSS Transform by TheOdinProject (@TheOdinProjectExamples) on CodePen.
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>These are the transform function values to skew an element on a 2D plane:
.element {
transform: skewX();
transform: skewY();
transform: skew();
}Below is a CodePen that shows how each value affects the target element.
See the Pen 2D Skew | CSS Transform by TheOdinProject (@TheOdinProjectExamples) on CodePen.
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>These are the transform function values to translate an element on a 2D plane:
.element {
transform: translateX();
transform: translateY();
transform: translate();
}Below is a CodePen that shows how each value affects the target element.
See the Pen 2D Translate | CSS Transform by TheOdinProject (@TheOdinProjectExamples) on CodePen.
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>Now that you have a grasp of 2D transforms, we will learn how to chain them. Chaining multiple transforms is as simple as adding more transform functions with a space between each one. Take a look at the code below:
<div class="red-box"></div>
<div class="blue-box"></div>.red-box,
.blue-box {
position: absolute;
width: 100px;
height: 100px;
}
.red-box {
background: red;
transform: rotate(45deg) translate(200%);
}
.blue-box {
background: blue;
transform: translate(200%) rotate(45deg);
}There are two boxes located at the same position. We chained rotate and translate function values to both boxes, but in different orders. Make a guess on what happens to each box, then click the "Result" link in the Codepen below to see if you were right.
See the Pen Chaining | CSS Transform by TheOdinProject (@TheOdinProjectExamples) on CodePen.
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>If you guessed correctly, congratulations! But this is a tricky concept. There is a bit of debate on how to read a chain of transform functions. According to MDN's transform docs: "The transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left."
To learn more about the "left to right" vs "right to left" interpretations, check out this visual article on chaining transforms.
While you can generally chain multiple transforms in any order for various results, there is one exception: perspective. This brings us nicely to the next section where perspective is involved.
The rotate, scale, and translate transform functions aren't limited to just the 2D plane. They work for the 3D plane as well! However, to perceive a 3D effect on some of these function values, perspective is required.
From here on, the examples get more complicated, so there will be more links to external resources which do an excellent job describing how each property works. Play around with these properties until you feel comfortable with them, but be careful not to get too sidetracked with them.
This is the transform function value to set the distance from the user to the z = 0 plane:
.element {
transform: perspective();
}Essentially, by setting a perspective value, we are telling the object to render as if we were viewing it from a specific distance on the z-axis.
Unlike other transform function values, perspective must be declared first (leftmost) when there are multiple transform function values. In the upcoming examples for rotate, scale, and translate, we will be able to see how it affects the target element.
For more details on how perspective works in regards to 3D transforms, check out this CSS Tricks article..
These are the additional transform function values to rotate an element on a 3D plane:
.element {
transform: rotateX();
transform: rotateY();
transform: rotateZ();
transform: rotate3d();
}Below is a CodePen that shows how the first three values affects the target element.
See the Pen 3D Rotate | CSS Transform by TheOdinProject (@TheOdinProjectExamples) on CodePen.
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>To learn about how rotate3d works, check out this great demonstration on MDN and this one on Quackit.
These are the additional transform function values to scale an element on a 3D plane:
.element {
transform: scaleZ();
transform: scale3d();
}See MDN's 3D cube in action with scaleZ here and scale3d here.
These are the additional transform function values to translate an element on a 3D plane:
.element {
transform: translateZ();
transform: translate3d();
}translateZ doesn't do much without perspective. Instead, perspective and translateZ work together to create the illusion of 3-dimensional distance from the rendered object, as shown in the example below.
See the Pen TranslateZ | CSS Transform by TheOdinProject (@TheOdinProjectExamples) on CodePen.
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>For a great demonstration on translate3d checkout the MDN cube again!
While not strictly a 3D transform function, matrix is mentioned last in this lesson due to how uncommonly used it is. These are the transform function values for it.
.element {
transform: matrix();
transform: matrix3d();
}Matrix is a way of combining all transform functions into one. It is seldom used due to its poor readability, and almost never written by hand. Unless you have a very complex transformation to apply, you should use other transform function values instead.
It is enough for you to know that these functions exist and generally how they work. However, it is not important for you to feel comfortable building with them. Skim this article to get the gist of matrix.
In order to understand why the transform property is great, you have to be aware of CSS triggers. You can learn about it in The Pixel Pipeline section from Google's Web Fundamentals.
The key benefit of using transform is that it occurs during composition. This makes it cheaper to use compared to many other CSS properties. You can see a table of what triggers are executed with each CSS property here.
Another benefit of transform is that it can be hardware-accelerated via a device's GPU (you don't have to understand how a GPU works but it is good to be aware of the term and what it means). This benefit is more prominent when it comes to transitions and animations which you will learn about in the following lessons.
This section contains helpful links to other content. It isn't required, so consider it supplemental.
- Here's a good resource that summarizes most common transform functions with some additional insight to how you may use them.
- For a full reference, there's always MDN.
- For more on the 3D transform functions, W3Schools has a good article demonstrating how they work.
This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.