Introduction

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.

Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

• How to use 2D transforms.
• How to use 3D transforms.
• How to chain multiple transforms.
• The benefits of using the `transform` property.

Basics of transforms

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” 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.

Two-dimensional transforms

In this section, we’ll go through 2D transforms with the following transform functions: `rotate`, `scale`, `skew`, and `translate`.

Rotate

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.

Scale

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.

Skew

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.

Translate

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.

Chaining multiple transforms

Now that you have a grasp of 2D transforms, we will learn how to chain them. Chaining multiple transforms is done by 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.

If you guessed correctly, congratulations! But this is a tricky concept. MDN’s transform docs state that “composite transforms are effectively applied in order from right to left”.

The blue box rotates 45 degrees on the spot, then translates on the X axis by 200%, moving it directly to the right. The red box translates by 200% first, so moves to the right, but the transform origin is still where it used to be. Therefore, it rotates 45 degrees around that original point, making the red box “swing down” to end up diagonally from where it started.

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.

Three-dimensional transforms

The `rotate`, `scale`, and `translate` transform functions aren’t limited to just 2D planes. They also work for 3D planes 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. Feel free to play around with these properties, but be careful not to get too sidetracked with them.

Perspective

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.

Rotate specific axis

These are the additional transform function values to rotate an element in a 3D space:

``````.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.

Scale specific axis

These are the additional transform function values to scale an element in a 3D space:

``````.element {
transform: scaleZ();
transform: scale3d();
}
``````

See MDN’s 3D cube in action with `scaleZ` and `scale3d`.

Translate specific axis

These are the additional transform function values to translate an element in a 3D space:

``````.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.

Matrix

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.

Benefits of transforms

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 what triggers are executed with each CSS property in this table of CSS triggers.

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.

Knowledge check

The following questions are an opportunity to reflect on key topics in this lesson. If you can’t answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.