Site icon Rdx Infotech

CSS Transform Handbook

CSS Transform Handbook

CSS transform allows you to translate, rotate, skew, scale, or add perspective effects to HTML elements.

This tutorial discusses everything you need to know to transform HTML elements like a pro.

Table of Contents

  1. What is the CSS transform Property?
  2. What is the CSS rotate() Function?
  3. What is the CSS rotateX() Function?
  4. What is the CSS rotateY() Function?
  5. What is the CSS rotateZ() Function?
  6. What is the CSS rotate3d() Function?
  7. CSS Rotate Functions vs. rotate Property: What’s the Difference?
  8. What is the CSS scale() Function?
  9. CSS scale() Function vs. scale Property: What’s the Difference?
  10. What is the CSS scaleZ() Function?
  11. What is the CSS scale3d() Function?
  12. What is the CSS skew() Function?
  13. What is the CSS translate() Function?
  14. What is the CSS translateZ() Function?
  15. What is the CSS translate3d() Function?
  16. CSS Translate Functions vs. translate Property: What’s the Difference?
  17. What is the CSS perspective() Function?
  18. CSS perspective() Function vs. perspective Property: What’s the Difference?
  19. What is the CSS matrix() Function?
  20. Why Does the CSS Transform Functions’ Order Matter?
  21. Tools for Converting Transform Functions to matrix()
  22. Important Stuff to Know about Transforming Elements in CSS
  23. Wrapping Up

So, without further ado, let’s discuss the CSS transform property.

What Is the CSS transform Property?

The CSS transform the property specifies the transformational effect you wish to apply to an HTML element.

Here’s the syntax:

html-element {
  transform: value;
}

The CSS transform the property accepts the following values:

Note: The transform property accepts one or more CSS transform functions. For instance, here’s a valid transform declaration:

div {
  transform: perspective(370px) scaleZ(5) rotate(17deg);
}

In the snippet above, we assigned three transform functions to the transform property. Let’s talk more about some of transform‘s values.

What is the CSS rotate() Function?

rotate() transforms an element by rotating it two-dimensionally around a fixed point.

Note:

Syntax of the CSS rotate() function

rotate() accepts a single argument. Here is the syntax:

element {
  transform: rotate(angle);
}

Note the following:

Examples of the CSS rotate() function

Below are some examples of how the CSS rotate() function works.

How to do a zero-degree rotation in CSS:

img {
  transform: rotate(0deg);
  width: 80%;
}

Try it on StackBlitz

The snippet above used the rotate() function to specify a zero-degree (0⁰) rotation for the image element.

How to do a 45-degree rotation in CSS:

img {
  transform: rotate(45deg);
  width: 80%;
}

Try it on StackBlitz

The snippet above used the rotate() function to specify a forty-five-degree (45⁰) rotation for the image element.

How to do a negative seventy-degree rotation in CSS:

img {
  transform: rotate(-70deg);
  width: 80%;
}

Try it on StackBlitz

The snippet above used the rotate() function to specify a negative seventy-degree (70⁰) rotation for the image element.

What is the CSS rotateX() Function?

rotateX() transforms an element by rotating it three-dimensionally around the X-axis.

A three-dimensional Cartesian coordinate system showing the X-, Y-, and Z-axis

Syntax of the CSS rotateX() function

rotateX() accepts a single argument. Here is the syntax:

element {
  transform: rotateX(angle);
}

Note the following:

Examples of the CSS rotateX() function

Below are some examples of how the CSS rotateX() function works.

How to do a zero-degree rotation around the X-axis:

img {
  transform: rotateX(0deg);
  width: 80%;
}

Try it on StackBlitz

The snippet above used the rotateX() function to specify a zero-degree (0⁰) rotation for the image around the X-axis.

How to do a 70-degree rotation around the X-axis:

img {
  transform: rotateX(70deg);
  width: 80%;
}

Try it on StackBlitz

The snippet above used the rotateX() function to specify a seventy-degree (70⁰) rotation for the image around the X-axis.

What is the CSS rotateY() Function?

rotateY() transforms an element by rotating it three-dimensionally around the Y-axis.

Syntax of the CSS rotateY() function

rotateY() accepts a single argument. Here is the syntax:

element {
  transform: rotateY(angle);
}

Note the following:

Examples of the CSS rotateY() function

Below are some examples of how the CSS rotateY() function works.

How to do a zero-degree rotation around the Y-axis:

img {
  transform: rotateY(0deg);
  width: 80%;
}

Try it on StackBlitz

The snippet above used the rotateY() function to specify a zero-degree (0⁰) rotation for the image around the Y-axis.

How to do a 70-degree rotation around the Y-axis:

img {
  transform: rotateY(70deg);
  width: 80%;
}

Try it on StackBlitz

The snippet above used the rotateY() function to specify a seventy-degree (70⁰) rotation for the image around the Y-axis.

What is the CSS rotateZ() Function?

rotateZ() transforms an element by rotating it three-dimensionally around the Z-axis.

Syntax of the CSS rotateZ() function

rotateZ() accepts a single argument. Here is the syntax:

element {
  transform: rotateZ(angle);
}

Note the following:

Examples of the CSS rotateZ() function

Below are some examples of how the CSS rotateZ() function works.

How to do a zero-degree rotation around the Z-axis:

img {
  transform: rotateZ(0deg);
  width: 80%;
}

Try it on StackBlitz

The snippet above used the rotateZ() function to specify a zero-degree (0⁰) rotation for the image around the Z-axis.

How to do a 70-degree rotation around the Z-axis:

img {
  transform: rotateZ(70deg);
  width: 80%;
}

Try it on StackBlitz

The snippet above used the rotateZ() function to specify a seventy-degree (70⁰) rotation for the image around the Z-axis.

What is the CSS rotate3d() Function?

rotate3d() transforms an element by rotating it three-dimensionally around the x-, y-, and z-axis.

Syntax of the CSS rotate3d() function

rotate3d() accepts four arguments. Here is the syntax:

element {
  transform: rotate3d(x, y, z, angle);
}

Note the following:

Examples of the CSS rotate3d() function

Below are some examples of how the CSS rotate3d() function works.

How to do a 70-degree rotation around the Z-axis:

img {
  transform: rotate3d(0, 0, 1, 70deg);
  width: 80%;
}

Try it on StackBlitz

The snippet above used the rotate3d() function to specify a seventy-degree (70⁰) rotation for the image around the Z-axis.

How to do a 70-degree rotation around the X-, Y-, and Z-axis:

img {
  transform: rotate3d(1, 1, 1, 70deg);
  width: 80%;
}

Try it on StackBlitz

The snippet above used the rotate3d() function to specify a seventy-degree (70⁰) rotation for the image around the x-, y-, and z-axis.

CSS Rotate Functions vs. rotate Property: What’s the Difference?

CSS rotate functions and CSS rotate property provides two similar ways to specify rotation transformations.

The main differences between the two rotation techniques are as follows:

Below are some examples.

How to use CSS rotate property vs. function to do a 45-degree rotation

img {
  rotate: 45deg; /* Equivalent to a transform: rotate(45deg) property */
  width: 80%;
}

Try it on StackBlitz

The snippet above used the rotate property to specify a forty-five-degree (45⁰) rotation for the image element.

How to use CSS rotate property vs. function to do a 70-degree rotation around the X-axis

img {
  rotate: x 70deg; /* Equal to a transform: rotateX(70deg) property */
  width: 80%;
}

Try it on StackBlitz

The snippet above used the rotate property to specify a seventy-degree (70⁰) rotation for the image around the X-axis.

How to use CSS rotate property vs. function to do a 70-degree rotation around the Y-axis

img {
  rotate: y 70deg; /* Equal to a transform: rotateY(70deg) property */
  width: 80%;
}

Try it on StackBlitz

The snippet above used the rotate property to specify a seventy-degree (70⁰) rotation for the image around the Y-axis.

How to use CSS rotate property vs. function to do a 70-degree rotation around the Z-axis

img {
  rotate: z 70deg; /* Equal to a transform: rotateZ(70deg) property */
  width: 80%;
}

Try it on StackBlitz

The snippet above used the rotate property to specify a seventy-degree (70⁰) rotation for the image around the Z-axis.

How to use CSS rotate property vs. function to do a 70-degree rotation around the X-, Y-, and Z-axis

img {
  rotate: 1 1 1 70deg; /* Equal to a transform: rotate3d(1, 1, 1, 70deg) property */
  width: 80%;
}

Try it on StackBlitz

The snippet above used the rotate property to specify a seventy-degree (70⁰) rotation for the image around the x-, y-, and z-axis.

Note: A none value tells browsers not to rotate the selected element.

What is the CSS scale() Function?

scale() transforms an element by resizing (scaling) it two-dimensionally from a fixed point.

Note:

Syntax of the CSS scale() function

scale() accepts two arguments. Here is the syntax:

element {
  transform: scale(x, y);
}

Note the following:

A two-dimensional Cartesian coordinate system showing the X- and Y-axis

Examples of the CSS scale() function

Below are some examples of how the CSS scale() function works.

How to scale an element uniformly along the X- and Y-axis in CSS:

img {
  transform: scale(0.3);
  transform-origin: left;
}

Try it on StackBlitz

The snippet above used the scale() function to specify a 0.3 scaling factor for the image element along the X- and Y-axis.

Note:

How to scale an element non-uniformly along the X- and Y-axis in CSS:

img {
  transform: scale(0.3, 65%);
  transform-origin: top left;
}

Try it on StackBlitz

The snippet above used the scale() function to specify a 0.3 scaling factor for the image along the X-axis and 65% along the Y-axis.

How to scale an element along only the X-axis:

img {
  transform: scale(0.3, 1);
  transform-origin: top left;
}

Try it on StackBlitz

The snippet above used the scale() function to specify a 0.3 scaling factor for the image along only the X-axis.

Note:

How to scale an element along only the Y-axis:

img {
  transform: scale(100%, 0.2);
  transform-origin: top left;
}

Try it on StackBlitz

The snippet above used the scale() function to specify a 0.2 scaling factor for the image along only the Y-axis.

Note:

CSS scale() Function vs. scale Property: What’s the Difference?

The CSS scale() function and the CSS scale property provide two similar ways to specify a scale transformation.

The main differences between the two scaling techniques are as follows:

Here’s an example:

Use the CSS scale property to scale an element nonuniformly along the X- and Y-axis.

img {
  scale: 0.3 65%; /* Equal to a transform: scale(0.3, 65%) property */
  transform-origin: top left;
}

Try it on StackBlitz

The snippet above used the scale property to specify a 0.3 scaling factor for the image along the X-axis and 65% along the Y-axis.

Note: A none value tells browsers not to scale the selected element.

What is the CSS scaleZ() Function?

scaleZ() transforms an element by resizing (scaling) it three-dimensionally from a fixed point along the z-axis.

Note:

Syntax of the CSS scaleZ() function

scaleZ() accepts a single argument. Here is the syntax:

element {
  transform: scaleZ(number);
}

Note:

Examples of the CSS scaleZ() function

We often use scaleZ() with other CSS functions such as perspective()translateZ(), and rotateX(). Below are some examples.

How to use scaleZ() with CSS perspective() and rotateX() functions:

img {
  transform: perspective(370px) scaleZ(5) rotateX(17deg);
  width: 80%;
}

Try it on StackBlitz

Here’s what we did in the snippet above:

  1. We used the perspective() function to define a 370px distance between the user and the z=0 plane.
  2. The scaleZ() function specifies a scale factor of 5 for the image along the z-axis.
  3. We used the rotateX() function to rotate the image seventeen-degree (17⁰) around the x-axis.

Note:

How to use scaleZ() with CSS perspective() and translateZ() functions:

img {
  width: 40%;
}

.second-image {
  transform: perspective(370px) scaleZ(5) translateZ(30px);
}

Try it on StackBlitz

Here’s what we did in the snippet above:

  1. We used the perspective() function to define a 370px distance between the user and the z=0 plane.
  2. The scaleZ() function specifies a scale factor of 5 for the image along the z-axis.
  3. We used the translateZ() function to reposition the second-image thirty pixels (30px) away from its original position along the z-axis.

What is the CSS scale3d() Function?

scale3d() transforms an element by resizing (scaling) it three-dimensionally from a fixed point along the x-, y-, and z-axis.

Note:

Syntax of the CSS scale3d() function

scale3d() accepts three arguments. Here is the syntax:

element {
  transform: scale3d(x, y, z);
}

The xy, and z arguments are numbers specifying the x-, y-, and z-coordinates. The coordinates are the axis along which browsers will scale the element.

Examples of the CSS scale3d() function

Below are some examples of how the CSS scale3d() function works.

How to use scale3d() with CSS perspective() and rotateX() functions:

img {
  transform: perspective(370px) scale3d(1, 1, 5) rotateX(17deg);
  width: 80%;
}

Try it on StackBlitz

Here’s what we did in the snippet above:

  1. We used the perspective() function to define a 370px distance between the user and the z=0 plane.
  2. The scale3d() function specifies a scale factor of 11, and 5 for the image along the x-, y-, and z-axis.
  3. We used the rotateX() function to rotate the image seventeen-degrees (17⁰) around the x-axis.

Note:

How to scale elements three-dimensionally:

img {
  width: 40%;
}

.second-image {
  transform: scale3d(5, 3, 0.05);
  transform-origin: top left;
}

Try it on StackBlitz

We used the scale3d() function to specify a scale factor of 53, and 0.05 for the image along the x-, y-, and z-axis.

What is the CSS skew() Function?

skew() transforms an element by slanting (skewing) it two-dimensionally around a fixed point.

Note:

Syntax of the CSS skew() function

skew() accepts two arguments. Here is the syntax:

element {
  transform: skew(aX, aY);
}

Note the following:

Examples of the CSS skew() function

Below are some examples of how the CSS skew() function works.

How to skew an element along only the X-axis:

img {
  transform: skew(30deg);
  transform-origin: top;
  width: 80%;
}

Try it on StackBlitz

The snippet above used the skew() function to apply a thirty-degree (30⁰) slant on the image along only the x-axis.

Note: skew(30deg) is equivalent to skewX(30deg).

How to skew an element along only the Y-axis:

img {
  transform: skew(0, 40deg);
  transform-origin: top left;
  width: 80%;
}

Try it on StackBlitz

The snippet above used the skew() function to apply a forty-degree (40⁰) slant on the image along only the y-axis.

Note:

How to skew an element along the X- and Y-axis:

img {
  transform: skew(30deg, 40deg);
  transform-origin: top left;
  width: 80%;
}

Try it on StackBlitz

The snippet above used the skew() function to apply a thirty-degree (30⁰) slant on the image along the x-axis. And forty-degree (40⁰) along the y-axis.

What is the CSS translate() Function?

translate() transforms an element by repositioning (translating) it two-dimensionally.

Syntax of the CSS translate() function

translate() accepts two arguments. Here is the syntax:

element {
  transform: translate(x, y);
}

Note the following:

Examples of the CSS translate() function

Below are some examples of how the CSS translate() function works.

How to translate an element along only the X-axis:

img {
  transform: translate(150px);
  width: 80%;
}

Try it on StackBlitz

The snippet above used the translate() function to reposition the image 150px away from its original position along the x-axis.

Note: translate(150px) is equivalent to translateX(150px).

How to translate an element along only the Y-axis:

img {
  transform: translate(0, 55%);
  width: 80%;
}

Try it on StackBlitz

The snippet above used the translate() function to reposition the image 55% away from its original position along the y-axis.

Note:

How to translate an element along the X- and Y-axis:

img {
  transform: translate(60%, 300px);
  width: 80%;
}

Try it on StackBlitz

The snippet above used the translate() function to reposition the image 60% away from its original position along the x-axis and 300px from its y-axis.

What is the CSS translateZ() Function?

translateZ() transforms an element by repositioning (translating) it three-dimensionally along the z-axis.

A three-dimensional Cartesian coordinate system showing the X-, Y-, and Z-axis

Syntax of the CSS translateZ() function

translateZ() accepts a single argument. Here is the syntax:

element {
  transform: translateZ(length);
}

The length argument specifies the distance you wish to move the element from its original z-axis position.

A three-dimensional Cartesian coordinate system with a red arrow defining the green plane’s translateZ length

Examples of the CSS translateZ() function

We often use translateZ() with the perspective() function. Below are some examples.

How to use translateZ() with the CSS perspective() function:

img {
  width: 40%;
}

.second-image {
  transform: perspective(33px) translateZ(10px);
}

Try it on StackBlitz

Here’s what we did in the snippet above:

  1. We used the perspective() function to define a 33px distance between the user and the z=0 plane.
  2. We used the translateZ() function to reposition the second-image ten pixels (10px) away from its original position along the z-axis.

Note:

How to use translateZ() with a 70px perspective:

img {
  width: 40%;
}

.second-image {
  transform: perspective(70px) translateZ(10px);
}

Try it on StackBlitz

Here’s what we did in the snippet above:

  1. We used the perspective() function to define a 70px distance between the user and the z=0 plane.
  2. We used the translateZ() function to reposition the second-image ten pixels (10px) away from its original position along the z-axis.

What is the CSS translate3d() Function?

translate3d() transforms an element by repositioning (translating) it three-dimensionally along the x-, y-, and z-axis.

Syntax of the CSS translate3d() function

translate3d() accepts three arguments. Here is the syntax:

element {
  transform: translate3d(x, y, z);
}

Note the following:

Examples of the CSS translate3d() function

Below are some examples of how the CSS translate3d() function works.

How to translate an element along only the X-axis

img {
  transform: translate3d(150px, 0, 0);
  width: 80%;
}

Try it on StackBlitz

The snippet above used the translate3d() function to reposition the image 150px away from its original position along the x-axis.

Note: translate3d(150px, 0, 0) is equivalent to translateX(150px).

How to translate elements three-dimensionally:

img {
  width: 40%;
}

.second-image {
  transform: perspective(300px) translate3d(15%, 45%, 200px);
}

Try it on StackBlitz

The snippet above used the translate3d() function to reposition the image 15% away from its original position along the x-axis, 45% from its y-axis, and 200px from its z-axis.

CSS Translate Functions vs. translate Property: What’s the Difference?

The CSS translate functions and the CSS translate property provide two similar ways to specify a translation transformation.

The main differences between the two translation techniques are as follows:

Below are some examples.

How to use CSS translate property vs. function to translate an element along the X- and Y-axis

img {
  translate: 60% 300px; /* Equal to a transform: translate(60%, 300px) property */
  width: 80%;
}

Try it on StackBlitz

The snippet above used the translate property to reposition the image 60% away from its original position along the x-axis. And 300px from its y-axis.

Note: Suppose you wish to translate an element along the z-axis. In that case, set a perspective property on the “parent element” of the element you want to translate. Otherwise, the element will not move along its z-axis.

How to use CSS translate property vs. function to translate an element along the Z-axis

img {
  width: 40%;
}

div {
  perspective: 35px;
}

.second-image {
  translate: 0px 0px 17px; /* Equal to a transform: translateZ(17px) property */
}

Try it on StackBlitz

Here’s what we did in the snippet above:

  1. We used the perspective property to define a 35px distance between the user and the z=0 plane.
  2. We used the translate property to reposition the second-image seventeen pixels (17px) away from its original position along the z-axis.

How to use CSS translate property vs. function to translate an element three-dimensionally

img {
  width: 40%;
}

div {
  perspective: 300px;
}

.second-image {
  translate: 50% 25% 200px; /* Equal to a transform: translate3d(50%, 25%, 200px) property */
}

Try it on StackBlitz

The snippet above used the translate property to reposition the image 50% away from its original position along the x-axis, 25% from its y-axis, and 200px from its z-axis.

Note: A none value tells browsers not to translate the selected element.

What is the CSS perspective() Function?

perspective() transforms an element by adding some perspective effects to it.

Syntax of the CSS perspective() function

perspective() accepts only one argument. Here is the syntax:

element {
  transform: perspective(length);
}

The length argument specifies the user’s distance to the z=0 plane.

A three dimensional Cartesian coordinate system with a red arrow defining the distance between the user and the z=0 plane

Examples of the CSS perspective() function

We often use perspective() with other CSS functions such as translateZ()rotateX(), and rotateY(). Below are some examples.

How to use perspective() with the CSS translateZ() function:

img {
  width: 40%;
}

.second-image {
  transform: perspective(33px) translateZ(10px);
}

Try it on StackBlitz

Here’s what we did in the snippet above:

  1. We used the perspective() function to define a 33px distance between the user and the z=0 plane.
  2. We used the translateZ() function to reposition the second-image ten pixels (10px) away from its original position along the z-axis.

Note the following:

How to use perspective() with the CSS rotateY() function:

img {
  width: 40%;
}

.second-image {
  transform: perspective(33px) rotateY(-10deg);
}

Try it on StackBlitz

Here’s what we did in the snippet above:

  1. We used the perspective() function to define a 33px distance between the user and the z=0 plane.
  2. We used the rotateY() function to rotate the second-image negative ten-degree (-10⁰) around the y-axis.

How to use perspective() with the CSS rotateX() function:

img {
  width: 40%;
}

.second-image {
  transform: perspective(33px) rotateX(17deg);
}

Try it on StackBlitz

Here’s what we did in the snippet above:

  1. We used the perspective() function to define a 33px distance between the user and the z=0 plane.
  2. We used the rotateX() function to rotate the second-image seventeen-degree (17⁰) around the x-axis.

CSS perspective() Function vs. perspective Property: What’s the Difference?

The CSS perspective() function and the perspective property provide two similar ways to add perspective effects to HTML elements.

The main differences between the two perspective techniques are as follows:

Here’s an example:

Use CSS perspective property to add perspective effect to a child element:

img {
  width: 40%;
}

div {
  perspective: 33px;
}

.second-image {
  rotate: x 17deg;
}

Try it on StackBlitz

Here’s what we did in the snippet above:

  1. We used the perspective property to define a 33px distance between the user and the z=0 plane.
  2. We used the rotate property to rotate the second-image seventeen-degree (17⁰) around the x-axis.

Note:

What is the CSS matrix() Function?

The CSS matrix() function is a shorthand for the following 2D transform functions:

In other words, instead of writing:

img {
  transform-origin: 0 0;
  transform: translateX(100px) translateY(250px) scaleX(2) scaleY(0.9)
    skewX(10deg) skewY(35deg);
  width: 80%;
}

Try it on StackBlitz

You can alternatively use the matrix() function to shorten your code like so:

img {
  transform-origin: 0 0;
  transform: matrix(2.24693, 0.630187, 0.352654, 0.9, 100, 250);
  width: 80%;
}

Try it on StackBlitz

The CSS matrix() function’s syntax

The matrix() function accepts six values. Here’s the syntax:

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

You can represent the CSS matrix’s values as homogeneous coordinates on ℝℙ2 like so:

| scX skX tX | ← x-axis
| skY scY tY | ← y-axis
|  0   0   1 | ← constants

Note the following:

RdxInfotech

Examples of the CSS matrix() function

Below are some examples of the CSS matrix() function.

How to convert scaleX() to matrix() function:

Consider the following transform property:

img {
  transform-origin: 0 0;
  transform: scaleX(2);
  width: 80%;
}

Try it on StackBlitz

Here is the matrix() equivalent of the above scaleX() function:

img {
  transform-origin: 0 0;
  transform: matrix(2, 0, 0, 1, 0, 0); /* scX, skY, skX, scY, tX, tY */
  width: 80%;
}

Try it on StackBlitz

Let’s also represent the matrix’s values as homogeneous coordinates on ℝℙ2:

| 2 0 0 | ← x-axis
| 0 1 0 | ← y-axis
| 0 0 1 | ← constants

Below is another example.

How to convert translateY() to matrix() function:

img {
  transform-origin: 0 0;
  transform: translateY(250px);
  width: 80%;
}

Try it on StackBlitz

Here is the matrix() equivalent of the above translateY() function:

img {
  transform-origin: 0 0;
  transform: matrix(1, 0, 0, 1, 0, 250); /* scX, skY, skX, scY, tX, tY */
  width: 80%;
}

Try it on StackBlitz

Let’s also represent the matrix’s values as homogeneous coordinates on ℝℙ2:

| 1 0 0   | ← x-axis
| 0 1 250 | ← y-axis
| 0 0 1   | ← constants

Below is a third example.

How to convert translateX() and scale() to matrix() function:

img {
  transform-origin: 0 0;
  transform: translateX(100px) scale(2);
  width: 80%;
}

Try it on StackBlitz

Here is the syntax for converting the above transform property’s value to matrix():

matrix = (translateX's homogeneous coordinates) x (scale's homogeneous coordinates)

Let’s begin the conversion by defining translateX(100px)‘s homogeneous coordinates:

| 1 0 100 | ← x-axis
| 0 1 0   | ← y-axis
| 0 0 1   | ← constants

Let’s also define scale(2)‘s homogeneous coordinates:

| 2 0 0 | ← x-axis
| 0 2 0 | ← y-axis
| 0 0 1 | ← constants

It’s now time to multiply the two homogeneous coordinates by using the following syntax:

| a d g |   | j m p |   | aj + dk + gl   am + dn + go   ap +dq  + gr |
| b e h | x | k n q | = | bj + ek + hl   bm + en + ho   bp + eq + hr |
| c f i |   | l o r |   | cj + fk + il   cm + fn + io   cp + fq + ir |

Let’s implement the above syntax like so:

| 1 0 100 |   | 2 0 0 |   | 2 + 0 + 0   0 + 0 + 0   0 + 0 + 100 |
| 0 1  0  | x | 0 2 0 | = | 0 + 0 + 0   0 + 2 + 0   0 + 0 +  0  |
| 0 0  1  |   | 0 0 1 |   | 0 + 0 + 0   0 + 0 + 0   0 + 0 +  1  |

The next step is to resolve the addition. So, let’s do that now.

| 1 0 100 |   | 2 0 0 |   | 2 0 100 |
| 0 1  0  | x | 0 2 0 | = | 0 2  0  |
| 0 0  1  |   | 0 0 1 |   | 0 0  1  |

The addition’s result above gives us the homogeneous coordinates of the transform: translateX(100px) scale(2) property.

In other words, the product of (translateX's homogeneous coordinates) and (scale's homogeneous coordinates) equal:

| 2 0 100 | ← x-axis
| 0 2  0  | ← y-axis
| 0 0  1  | ← constants

Therefore, the matrix equivalence of transform: translateX(100px) scale(2) is transform: matrix(2, 0, 0, 2, 100, 0).

img {
  transform-origin: 0 0;
  transform: matrix(2, 0, 0, 2, 100, 0);
  width: 80%;
}

Try it on StackBlitz

Please note that transform: translateX(100px) scale(2) and transform: scale(2) translateX(100px) return different matrixes. Let’s see an example of the second arrangement below.

How to convert scale() and translateX() to matrix() function:

Consider the following transform property:

img {
  transform-origin: 0 0;
  transform: scale(2) translateX(100px);
  width: 80%;
}

Try it on StackBlitz

Here is the syntax for converting the above transform property’s value to matrix():

matrix = (scale's homogeneous coordinates) x (translateX's homogeneous coordinates)

Let’s begin the conversion by defining scale(2)‘s homogeneous coordinates:

| 2 0 0 | ← x-axis
| 0 2 0 | ← y-axis
| 0 0 1 | ← constants

Let’s also define translateX(100px)‘s homogeneous coordinates:

| 1 0 100 | ← x-axis
| 0 1  0  | ← y-axis
| 0 0  1  | ← constants

It’s now time to multiply the two homogeneous coordinates by using the following syntax:

| a d g |   | j m p |   | aj + dk + gl   am + dn + go   ap +dq  + gr |
| b e h | x | k n q | = | bj + ek + hl   bm + en + ho   bp + eq + hr |
| c f i |   | l o r |   | cj + fk + il   cm + fn + io   cp + fq + ir |

Let’s implement the above syntax like so:

| 2 0 0 |   | 1 0 100 |   | 2 + 0 + 0   0 + 0 + 0   200 + 0 + 0 |
| 0 2 0 | x | 0 1  0  | = | 0 + 0 + 0   0 + 2 + 0    0 + 0 + 0  |
| 0 0 1 |   | 0 0  1  |   | 0 + 0 + 0   0 + 0 + 0    0 + 0 + 1  |

The next step is to resolve the addition. So, let’s do that now.

| 2 0 0 |   | 1 0 100 |   | 2 0 200 |
| 0 2 0 | x | 0 1  0  | = | 0 2  0  |
| 0 0 1 |   | 0 0  1  |   | 0 0  1  |

The addition’s result above gives us the homogeneous coordinates of the transform: scale(2) translateX(100px) property.

In other words, the product of (scale's homogeneous coordinates) and (translateX's homogeneous coordinates) equal:

| 2 0 200 | ← x-axis
| 0 2  0  | ← y-axis
| 0 0  1  | ← constants

Therefore, the matrix equivalence of transform: scale(2) translateX(100px) is transform: matrix(2, 0, 0, 2, 200, 0).

img {
  transform-origin: 0 0;
  transform: matrix(2, 0, 0, 2, 200, 0);
  width: 80%;
}

Try it on StackBlitz

Notice that transform: scale(2) translateX(100px) equals transform: matrix(2, 0, 0, 2, 200, 0). And transform: translateX(100px) scale(2) is equivalent to transform: matrix(2, 0, 0, 2, 100, 0).

In other words, the order in which you write the transform functions matters. Let’s discuss more on this below.

Why Does the CSS Transform Functions’ Order Matter?

The order in which you write CSS transform functions matters because of the way browsers calculate the matrix’s values.

For instance, consider the following snippet:

div {
  position: absolute;
  width: 100px;
  height: 100px;
  transform-origin: 0 0;
}

.red {
  border: 3px solid red;
  background-color: rgba(255, 0, 0, 0.5);
}

.green {
  border: 3px solid green;
  background-color: rgba(0, 128, 0, 0.5);
  transform: translateX(100px) scale(2);
}

.blue {
  border: 3px solid blue;
  background-color: rgba(0, 0, 255, 0.5);
  transform: scale(2) translateX(100px);
}

Try it on StackBlitz

The only difference between the green and the blue divs is the order in which we wrote their transform functions.

However, the computer translated the two containers using different values (100px for the green div and 200px for the blue one).

So, why did the transform functions’ order affect the divs’ translation values? Here’s the reason:

In other words, the computer used the following syntax to compute the green div‘s matrix:

And it used the following syntax to calculate the blue div‘s matrix:

Therefore, the position of the transform functions determined the matrix’s arguments because browsers began the calculation in order from the leftmost function to the right.

Knowing how to convert transform functions to matrix() is beneficial. And having some conversion tools can come in handy. So, let’s discuss some helpful tools you can use.

Tools for Converting Transform Functions to matrix()

The two tools you can use to do a quick conversion of transform functions to matrix() are:

How to use window.getComputedStyle() to convert transform functions to matrix()

Suppose you want to convert the following transform functions to matrix:

img {
  transform-origin: 0 0;
  transform: scale(2) translateX(100px);
  width: 80%;
}

You will add an id attribute to the image element:

<img
  src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
  alt=""
  id="image"
/>

Then, in JavaScript, you will:

  1. Use the id attribute to get the image element.
  2. Use the window.getComputedStyle() method to get the images transform property’s value.

Here’s the code:

// Get the image element by its id name:
const image = document.getElementById("image");

// Get the image element's transform property's value:
const matrix = window.getComputedStyle(image).getPropertyValue("transform");

// Log the matrix variable's value to the console:
console.log(matrix);

Try it on StackBlitz

Browsers, by default, convert a CSS transform property’s value to its matrix equivalent. So, the snippet above returned the image’s computed value.

Let’s now discuss the second conversion tool.

How to use the matrix resolutions tool to convert transform functions to matrix()

Suppose you want to convert the following transform functions to a matrix():

img {
  transform-origin: 0 0;
  transform: scale(2) translateX(100px);
  width: 80%;
}

You will do the following:

  1. Go to The Matrix Resolutions website: https://meyerweb.com/eric/tools/matrix/.
  2. Paste your transform functions (scale(2) translateX(100px)) into the first text field.
  3. Click “The Red Pill” button to generate the transform functions’ matrix equivalence.
Click the red pill button to convert CSS transform functions to a matrix() function

Tip: Use matrix3d() to create a 3D transformation matrix.

Important Stuff to Know about Transforming Elements in CSS

Here are three essential facts to remember when you transform elements in CSS.

1. Transform creates a stacking context

Suppose you set the transform property to any value other than none. In that case, the browser will create a stacking context. And the transformed element will serve as a containing block to any absolute or fixed-positioned elements it contains.

2. Scaling and zooming animations cause accessibility issues

Whenever you include scaling or zooming animations in your app, provide users an option to turn off animations. This option is necessary because scaling and zooming animations cause accessibility issues.

3. Not all elements are transformable

You cannot transform the following box models:

Wrapping Up

In this article, we discussed all the CSS transform tools you need to translate, rotate, skew, scale, or add perspective effects to HTML elements.

I hope you’ve found this article helpful.

Thanks for reading!

If you like this tutorial, you will enjoy my CSS Flexbox book. It is a handy quick reference guide that uses images and live examples to explain Flexbox.

Exit mobile version