How to Use Transforms in CSS

<FiltersTransitions>

Transforming elements

CSS allows you to transform an element, such as rotating or scaling, to make the webpage look more dynamic. This is achieved with the transform property, which accepts the following functions:

  • translate(), translateX(), and translateY()
  • scale(), scaleX(), and scaleY()
  • rotate()
  • skew(), skewX(), and skewY()
  • matrix()

Translate

The translate(x,y) method moves the element along the X-axis and Y-axis. For instance, translate(20px, 30px) will move the element 20px to the right and 30px down.

html
1<div class="original">Original</div>
2<div class="transformed">Transformed</div>
css
1div {
2  border: 2px solid orange;
3  background-color: bisque;
4  padding: 5px;
5  width: 100px;
6  height: 60px;
7  position: fixed;
8  top: 0px;
9  left: 0px;
10}
11
12.transformed {
13  transform: translate(20px, 30px);
14}

Having a fixed position ensures that both blocks start at the same location.

translate

Negative values are also accepted here, which moves the element to the left or up.

css
1.transformed {
2  transform: translate(-20px, -30px);
3}

translate with negative values

translateX(n) and translateY(n) are two of its variants. translateX(n) moves the element along the X-axis, and translateY(n) moves the element along the Y-axis.

Scale

The scale(width, height) alters the size of the element based on its original size. For instance, scale(3,2) will increase the element's size to three times its original width and two times its original height.

css
1.transformed {
2  transform: scale(3, 2);
3  background-color: rgb(255, 228, 196, 0.5);
4}

scale

To shrink the original element, use decimal numbers.

css
1.transformed {
2  transform: scale(0.3, 0.2);
3  background-color: rgb(255, 228, 196, 0.5);
4}

scale shrink

Similarly, scaleX(width), and scaleY(height) are two of its variants.

Rotate

The rotate(degree) method, as the name suggests, rotates the original element along its center point, either clockwise (positive values) or counter-clockwise (negative values).

css
1.transformed {
2  transform: rotate(45deg);
3  background-color: rgb(255, 228, 196, 0.5);
4}

rotate clockwise

css
1.transformed {
2  transform: rotate(-45deg);
3  background-color: rgb(255, 228, 196, 0.5);
4}

rotate counter-clockwise

Skew

The skew(x,y) method skews the element along X-axis and Y-axis.

css
1.transformed {
2  transform: skew(20deg, 30deg);
3  background-color: rgb(255, 228, 196, 0.5);
4}

skewed

And just like the other variants, skewX(n) skews the element along the X-axis, and skewY(n) skews the element along the Y-axis.

Matrix

Lastly, the matrix() method combines all of the functions discussed above, allowing you to define multiple transforms simultaneously. The syntax is as follows:

text
1matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Notice how rotate() is missing from this syntax? That is because the rotation degree (θ) can be derived from the following equation:

text
1θ = atan2(skewY(), scaleX()) * (180 / π)

Where atan2(b, a) is an arctangent function that takes two values and returns the angle whose tangent is the quotient of b and a. (180 / π) then converts radiant to degrees.

That is a lot of math for a web development course, so we suggest you avoid using the matrix() function if possible. You might have to write more code and use more functions to achieve the same result, but it will make the code much easier to understand, and sometimes, that is much more crucial than writing less code.

<FiltersTransitions>