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 CSStransform Property?

2. What is the CSSrotate() Function?

3. What is the CSSrotateX() Function?

4. What is the CSSrotateY() Function?

5. What is the CSSrotateZ() Function?

6. What is the CSSrotate3d() Function?

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

8. What is the CSSscale() Function?

9. CSSscale() Function vs.scale Property: What's the Difference?

10. What is the CSSscaleZ() Function?

11. What is the CSSscale3d() Function?

12. What is the CSSskew() Function?

13. What is the CSStranslate() Function?

14. What is the CSStranslateZ() Function?

15. What is the CSStranslate3d() Function?

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

17. What is the CSSperspective() Function?

18. CSSperspective() Function vs.perspective Property: What's the Difference?

19. What is the CSSmatrix() Function?

20. Why Does the CSS Transform Functions' Order Matter?

21. Tools for Converting Transform Functions tomatrix()

22. Important Stuff to Know about Transforming Elements in CSS

23. Wrapping Up

So, without further ado, let's discuss the CSStransform property.

What Is the CSStransform Property?

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

Here's the syntax:

html-element {transform: value;}

The CSStransform property accepts the following values:

• inherit: Transforms the element with its parent element'stransform value.

• initial: Transforms the HTML element with its defaulttransform value.

• matrix(): Transforms the element two-dimensionally with a matrix of six values.

• matrix3d(): Transforms the HTML element three-dimensionally with a 4x4 matrix of sixteen values.

• none: Appliesno transformation to the HTML element.

• perspective(): Transforms a 3D transformed element with a perspective view.

• rotate(): Transforms the element by rotating it two-dimensionally.

• rotate3d(): Transforms the element by rotating it three-dimensionally.

• rotateX(): Transforms the element by rotating it three-dimensionally along the X-axis.

• rotateY(): Transforms the element by rotating it three-dimensionally along the Y-axis.

• rotateZ(): Transforms the HTML element by rotating it three-dimensionally along the Z-axis.

• scale(): Transforms the element by scaling it two-dimensionally.

• scale3d(): Transforms the element by scaling it three-dimensionally.

• scaleX(): Transforms the element by scaling it along the X-axis.

• scaleY(): Transforms the element by scaling it along the Y-axis.

• scaleZ(): Transforms the HTML element by scaling it three-dimensionally along the Z-axis.

• skew(): Transforms the element by skewing it two-dimensionally along the X- and Y-axis.

• skewX(): Transforms the element by skewing it two-dimensionally along the X-axis.

• skewY(): Transforms the element by skewing it two-dimensionally along the Y-axis.

• translate(): Transforms the HTML element by translating (moving) it two-dimensionally.

• translate3d(): Transforms the element by translating it three-dimensionally.

• translateX(): Transforms the element by translating it along the X-axis.

• translateY(): Transforms the element by translating it along the Y-axis.

• translateZ(): Transforms the element by translating it three-dimensionally along the Z-axis.

Note: Thetransform property accepts one or moreCSS transform functions. For instance, here's a validtransform declaration:

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

In the snippet above, we assigned three transform functions to thetransform property. Let's talk more about some oftransform's values.

What is the CSSrotate() Function?

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

Note:

• "Transform origin" is the fixed point around which an element rotates.

• You can define your element's fixed point using the CSStransform-origin property. But the default iscenter.

Syntax of the CSSrotate() function

rotate() accepts a singleargument. Here is the syntax:

element {transform:rotate(angle);}

Note the following:

• Therotate(angle) function is equivalent torotate3d(0, 0, 1, angle) orrotateZ(angle).

• Theangle argument specifies the element's angle of rotation.

• angle can be indegrees,gradians,radians, orturns.

• Anangle argument consists of a number followed by the unit you wish to use—for instance,45deg.

• Your browser's writing direction determines the element's direction of rotation.

• A positive angle will rotate the element clockwise in a left-to-right writing direction. But a negative angle will do a counterclockwise rotation.

• A positive angle will rotate the element counterclockwise in a right-to-left writing context. But a negative angle will do a clockwise rotation.

Examples of the CSSrotate() function

Below are some examples of how the CSSrotate() 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 therotate() 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 therotate() 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 therotate() function to specify a negative seventy-degree (70⁰) rotation for the image element.

What is the CSSrotateX() 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 CSSrotateX() function

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

element {transform:rotateX(angle);}

Note the following:

• TherotateX(angle) function is equivalent torotate3d(1, 0, 0, angle).

• Theangle argument specifies the element's angle of rotation.

• angle can be in degree, gradian, radian, or turn.

• Anangle argument consists of a number followed by the unit you wish to use—for instance,45deg.

Examples of the CSSrotateX() function

Below are some examples of how the CSSrotateX() 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 therotateX() 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 therotateX() function to specify a seventy-degree (70⁰) rotation for the image around the X-axis.

What is the CSSrotateY() Function?

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

Syntax of the CSSrotateY() function

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

element {transform:rotateY(angle);}

Note the following:

• TherotateY(angle) function is equivalent torotate3d(0, 1, 0, angle).

• Theangle argument specifies the element's angle of rotation.

• angle can be in degrees, gradians, radians, or turns.

• Anangle argument consists of a number followed by the unit you wish to use—for instance,45deg.

Examples of the CSSrotateY() function

Below are some examples of how the CSSrotateY() 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 therotateY() 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 therotateY() function to specify a seventy-degree (70⁰) rotation for the image around the Y-axis.

What is the CSSrotateZ() Function?

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

Syntax of the CSSrotateZ() function

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

element {transform:rotateZ(angle);}

Note the following:

• TherotateZ(angle) function is equivalent torotate3d(0, 0, 1, angle) orrotate(angle).

• Theangle argument specifies the element's angle of rotation.

• angle can be in degrees, gradians, radians, or turns.

• Anangle argument consists of a number followed by the unit you wish to use—for instance,45deg.

Examples of the CSSrotateZ() function

Below are some examples of how the CSSrotateZ() 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 therotateZ() 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 therotateZ() function to specify a seventy-degree (70⁰) rotation for the image around the Z-axis.

What is the CSSrotate3d() Function?

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

Syntax of the CSSrotate3d() function

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

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

Note the following:

• Thex,y, andz arguments are numbers specifying the x-, y-, and z-coordinates.

• The coordinates are the axis around which the element will rotate.

• Theangle argument specifies the element's angle of rotation.

• angle can be in degrees, gradians, radians, or turns.

• Anangle argument consists of a number followed by the unit you wish to use—for instance,45deg.

Examples of the CSSrotate3d() function

Below are some examples of how the CSSrotate3d() 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 therotate3d() 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 therotate3d() 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 CSSrotate property provides two similar ways to specify rotation transformations.

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

• The CSSrotate property allows rotating an element without using the CSStransform property.

• The CSSrotate property's syntax is shorter than its function alternative.

• The CSSrotate property saves you from remembering the specific order to position thetransform functions.

• Browsers calculate the transform functions' matrix in the order you assigned them to the CSStransform property—from left to right.

• Browsers calculate the transform properties' matrix in the followingtransformation matrix order:

  1. translate

  2. rotate

  3. scale

Below are some examples.

How to use CSSrotate 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 therotate property to specify a forty-five-degree (45⁰) rotation for the image element.

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

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

Try it on StackBlitz

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

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

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

Try it on StackBlitz

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

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

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

Try it on StackBlitz

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

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

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

Try it on StackBlitz

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

Note: Anone value tells browsersnot to rotate the selected element.

What is the CSSscale() Function?

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

Note:

• "Transform origin" is the fixed point from which the computer scales an element.

• You can define your element's fixed point using the CSStransform-origin property. But the default iscenter.

Syntax of the CSSscale() function

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

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

Note the following:

• Thex argument can be a number or percentage. It specifies the element's scaling factor along the x-axis.

• They argument can also be a number or percentage. It defines the element's scaling factor along the y-axis.

• Y-axis' default value isx. Therefore, if you do not provide ay argument, the browser automatically usesx's value.

• Supposex andy are equal. In that case, browsers will scale your element uniformly and preserve its aspect ratio.

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

Examples of the CSSscale() function

Below are some examples of how the CSSscale() 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 thescale() function to specify a0.3 scaling factor for the image element along the X- and Y-axis.

Note:

• scale(0.3) is equivalent toscale(0.3, 0.3).

• The percentage equivalence ofscale(0.3) isscale(30%).

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 thescale() function to specify a0.3 scaling factor for the image along the X-axis and65% 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 thescale() function to specify a0.3 scaling factor for the image along only the X-axis.

Note:

• A scale factor of1 or100% tells browsersnot to apply any scaling effect on the selected element.

• scale(0.3, 1) is equivalent toscaleX(0.3).

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 thescale() function to specify a0.2 scaling factor for the image along only the Y-axis.

Note:

• A100% or1 scale factor tells browsersnot to apply any scaling effect on the selected element.

• scale(100%, 0.2) is equivalent toscaleY(0.2).

CSSscale() Function vs.scale Property: What's the Difference?

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

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

• The CSSscale property allows scaling an element without using the CSStransform property.

• The CSSscale property's syntax is shorter than its function alternative.

• The CSSscale property saves you from remembering the specific order to position the transform functions.

• Browsers calculate the transform functions' matrix in the order you assigned them to the CSStransform property—from left to right.

• Browsers calculate the transform properties' matrix in the following order:

  1. translate

  2. rotate

  3. scale

Here's an example:

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

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

Try it on StackBlitz

The snippet above used thescale property to specify a0.3 scaling factor for the image along the X-axis and65% along the Y-axis.

Note: Anone value tells browsersnot to scale the selected element.

What is the CSSscaleZ() Function?

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

Note:

• "Transform origin" is the fixed point from which the computer scales an element.

• You can define your element's fixed point using the CSStransform-origin property. But the default iscenter.

Syntax of the CSSscaleZ() function

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

element {transform:scaleZ(number);}

Note:

• ThescaleZ(number) function is equivalent toscale3d(1, 1, number).

• Thenumber argument specifies the element's scaling factor along the z-axis.

Examples of the CSSscaleZ() function

We often usescaleZ() with other CSS functions such asperspective(),translateZ(), androtateX(). Below are some examples.

How to usescaleZ() with CSSperspective() androtateX() 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 theperspective() function to define a370px distance between the user and thez=0 plane.

2. ThescaleZ() function specifies a scale factor of5 for the image along the z-axis.

3. We used therotateX() function to rotate the image seventeen-degree (17⁰) around the x-axis.

Note:

• Listperspective() first whenever you chain it with otherCSS transform functions. Otherwise, browsers might transform the selected element incorrectly.

• List thescaleZ() function beforerotateX(). Otherwise, the browser willnot scale the element.

How to usescaleZ() with CSSperspective() andtranslateZ() 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 theperspective() function to define a370px distance between the user and the z=0 plane.

2. ThescaleZ() function specifies a scale factor of5 for the image along the z-axis.

3. We used thetranslateZ() function to reposition thesecond-image thirty pixels (30px) away from its original position along the z-axis.

What is the CSSscale3d() Function?

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

Note:

• "Transform origin" is the fixed point from which the computer scales an element.

• You can define your element's fixed point using the CSStransform-origin property. But the default iscenter.

Syntax of the CSSscale3d() function

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

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

Thex,y, andz 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 CSSscale3d() function

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

How to usescale3d() with CSSperspective() androtateX() 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 theperspective() function to define a370px distance between the user and the z=0 plane.

2. Thescale3d() function specifies a scale factor of1,1, and5 for the image along the x-, y-, and z-axis.

3. We used therotateX() function to rotate the image seventeen-degrees (17⁰) around the x-axis.

Note:

• A scale factor of1 will applyno scaling effect on the element.

• Listperspective() first whenever you chain it with other CSS transform functions. Otherwise, browsers might transform the selected element incorrectly.

• List thescale3d() function beforerotateX(). Otherwise, the browser willnot scale the element.

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 thescale3d() function to specify a scale factor of5,3, and0.05 for the image along the x-, y-, and z-axis.

What is the CSSskew() Function?

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

Note:

• "Transform origin" is the fixed point from which the computer skews an element.

• You can define your element's fixed point using the CSStransform-origin property. But the default iscenter.

Syntax of the CSSskew() function

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

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

Note the following:

• TheaX argument specifies the element's skewing angle along the x-axis.

• TheaY argument specifies the element's skewing angle along the y-axis.

• aX andaY can be in degrees, gradians, radians, or turns.

• Anangle argument consists of a number followed by the unit you wish to use—for instance,45deg.

• aY is an optional argument.

Examples of the CSSskew() function

Below are some examples of how the CSSskew() 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 theskew() function to apply a thirty-degree (30⁰) slant on the image along only the x-axis.

Note:skew(30deg) is equivalent toskewX(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 theskew() function to apply a forty-degree (40⁰) slant on the image along only the y-axis.

Note:

• A zero (0) skew degree tells browsersnot to apply any skewing effect on the selected element.

• skew(0, 40deg) is equivalent toskewY(40deg).

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 theskew() 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 CSStranslate() Function?

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

Syntax of the CSStranslate() function

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

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

Note the following:

• Thex argument can be a length or percentage value. It specifies the distance you wish to move the element from its original x-axis position.

• They argument can be a length or percentage value. It defines the distance you wish to move the element from its original y-axis position.

• y is an optional argument.

Examples of the CSStranslate() function

Below are some examples of how the CSStranslate() 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 thetranslate() function to reposition the image150px away from its original position along the x-axis.

You can also write it like this, specifying theX:

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

Note:translate(150px) is equivalent totranslateX(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 thetranslate() function to reposition the image55% away from its original position along the y-axis.

Note:

• A zero (0) translate distance tells browsersnot to apply any translating effect on the selected element.

• translate(0, 55%) is equivalent totranslateY(55%).

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 thetranslate() function to reposition the image60% away from its original position along the x-axis and300px from its y-axis.

What is the CSStranslateZ() 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 CSStranslateZ() function

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

element {transform:translateZ(length);}

Thelength 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 CSStranslateZ() function

We often usetranslateZ() with theperspective() function. Below are some examples.

How to usetranslateZ() with the CSSperspective() 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 theperspective() function to define a33px distance between the user and thez=0 plane.

2. We used thetranslateZ() function to reposition thesecond-image ten pixels (10px) away from its original position along the z-axis.

Note:

• Suppose thesecond-image's z-axis position is larger than or equal to theperspective() function'sargument. In that case, the image will disappear as though it is behind the user. In other words, the selected item disappears when the user is in the same position as the element (or when the element is behind the user).

• The larger the user's distance to the element's z-axis position, the less intensive the perspective effect will be, and vice-versa.

How to usetranslateZ() with a70px 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 theperspective() function to define a70px distance between the user and the z=0 plane.

2. We used thetranslateZ() function to reposition thesecond-image ten pixels (10px) away from its original position along the z-axis.

What is the CSStranslate3d() Function?

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

Syntax of the CSStranslate3d() function

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

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

Note the following:

• Thex argument can be a length or percentage value. It specifies the distance you wish to move the element from its original x-axis position.

• They argument can be a length or percentage value. It defines the distance you wish to move the element from its original y-axis position.

• z can only be a length—not a percentage. It defines the distance you wish to move the element from its original z-axis position.

Examples of the CSStranslate3d() function

Below are some examples of how the CSStranslate3d() 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 thetranslate3d() function to reposition the image150px away from its original position along the x-axis.

Note:translate3d(150px, 0, 0) is equivalent totranslateX(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 thetranslate3d() function to reposition the image15% away from its original position along the x-axis,45% from its y-axis, and200px from its z-axis.

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

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

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

• The CSStranslate property allows translating an element without using the CSStransform property.

• The CSStranslate property's syntax is shorter than its function alternative.

• The CSStranslate property saves you from remembering the specific order to position the transform functions.

• Browsers calculate the transform functions' matrix in the order you assigned them to the CSStransform property—from left to right.

• Browsers calculate the transform properties' matrix in the following order:

  1. translate

  2. rotate

  3. scale

Below are some examples.

How to use CSStranslate 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 thetranslate property to reposition the image60% away from its original position along the x-axis. And300px from its y-axis.

Note: Suppose you wish to translate an element along the z-axis. In that case, set aperspective 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 CSStranslate property vs. function to translate an element along the Z-axis

img {width:40%;}div {perspective:35px;}.second-image {translate:0px0px17px;/* Equal to a transform: translateZ(17px) property */}

Try it on StackBlitz

Here's what we did in the snippet above:

1. We used theperspective property to define a35px distance between the user and the z=0 plane.

2. We used thetranslate property to reposition thesecond-image seventeen pixels (17px) away from its original position along the z-axis.

How to use CSStranslate 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 thetranslate property to reposition the image50% away from its original position along the x-axis,25% from its y-axis, and200px from its z-axis.

Note: Anone value tells browsersnot to translate the selected element.

What is the CSSperspective() Function?

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

Syntax of the CSSperspective() function

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

element {transform:perspective(length);}

Thelength argument specifies the user's distance to thez=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 CSSperspective() function

We often useperspective() with other CSS functions such astranslateZ(),rotateX(), androtateY(). Below are some examples.

How to useperspective() with the CSStranslateZ() 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 theperspective() function to define a33px distance between the user and the z=0 plane.

2. We used thetranslateZ() function to reposition thesecond-image ten pixels (10px) away from its original position along the z-axis.

Note the following:

• Suppose thesecond-image's z-axis position is larger than or equal to theperspective() function's argument. In that case, the image will disappear as though it is behind the user. In other words, the selected item disappears when the user is in the same position as the element (or when the element is behind the user).

• The larger the user's distance to the element's z-axis position, the less intensive the perspective effect will be, and vice-versa.

How to useperspective() with the CSSrotateY() 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 theperspective() function to define a33px distance between the user and the z=0 plane.

2. We used therotateY() function to rotate thesecond-image negative ten-degree (-10⁰) around the y-axis.

How to useperspective() with the CSSrotateX() 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 theperspective() function to define a33px distance between the user and the z=0 plane.

2. We used therotateX() function to rotate thesecond-image seventeen-degree (17⁰) around the x-axis.

CSSperspective() Function vs.perspective Property: What's the Difference?

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

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

• We apply theperspective() function "directly on the element" we want to add some perspective effects to.

• We apply theperspective property "on the parent element" of the element we want to add some perspective effects to.

• Theperspective() function works as atransform property's value.

• The CSSperspective property allows you to create perspective effects without using the CSStransform property.

Here's an example:

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

img {width:40%;}div {perspective:33px;}.second-image {rotate: x17deg;}

Try it on StackBlitz

Here's what we did in the snippet above:

1. We used theperspective property to define a33px distance between the user and the z=0 plane.

2. We used therotate property to rotate thesecond-image seventeen-degree (17⁰) around the x-axis.

Note:

• The CSSperspective property saves you from remembering the specific order to position the transform functions.

• Anone value tells browsersnot to add any perspective effect to the selected element's children.

What is the CSSmatrix() Function?

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

• scaleX()

• skewY()

• skewX()

• scaleY()

• translateX()

• translateY()

In other words, instead of writing:

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

Try it on StackBlitz

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

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

Try it on StackBlitz

The CSSmatrix() function's syntax

Thematrix() function accepts six values. Here's the syntax:

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

You can represent the CSS matrix's values ashomogeneous coordinates onℝℙ² like so:

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

Note the following:

• scX andskX are numbers describing an element's scale and skew linear transformation on the x-axis.

• tX is a number representing an element's translation on the x-axis.

• skY andscY are numbers describing an element's skew and scale linear transformation on the y-axis.

• tY is a number representing an element's translation on the y-axis.

• 0,0,1 are constants.

• We do not pass the constants asarguments to thematrix() function because the computer implies them automatically.

Examples of the CSSmatrix() function

Below are some examples of the CSSmatrix() function.

How to convertscaleX() tomatrix() function:

Consider the followingtransform property:

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

Try it on StackBlitz

Here is thematrix() equivalent of the abovescaleX() function:

img {transform-origin:00;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 0 0 | ← x-axis| 0 1 0 | ← y-axis| 0 0 1 | ← constants

Below is another example.

How to converttranslateY() tomatrix() function:

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

Try it on StackBlitz

Here is thematrix() equivalent of the abovetranslateY() function:

img {transform-origin:00;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 ℝℙ²:

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

Below is a third example.

How to converttranslateX() andscale() tomatrix() function:

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

Try it on StackBlitz

Here is the syntax for converting the abovetransform property's value tomatrix():

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

Let's begin the conversion by definingtranslateX(100px)'s homogeneous coordinates:

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

Let's also definescale(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 thetransform: 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 oftransform: translateX(100px) scale(2) istransform: matrix(2, 0, 0, 2, 100, 0).

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

Try it on StackBlitz

Please note thattransform: translateX(100px) scale(2) andtransform: scale(2) translateX(100px) return different matrixes. Let's see an example of the second arrangement below.

How to convertscale() andtranslateX() tomatrix() function:

Consider the followingtransform property:

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

Try it on StackBlitz

Here is the syntax for converting the abovetransform property's value tomatrix():

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

Let's begin the conversion by definingscale(2)'s homogeneous coordinates:

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

Let's also definetranslateX(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 thetransform: 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 oftransform: scale(2) translateX(100px) istransform: matrix(2, 0, 0, 2, 200, 0).

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

Try it on StackBlitz

Notice thattransform: scale(2) translateX(100px) equalstransform: matrix(2, 0, 0, 2, 200, 0). Andtransform: translateX(100px) scale(2) is equivalent totransform: 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 writeCSS 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:00;}.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 bluedivs is the order in which we wrote their transform functions.

However, the computer translated the two containers using different values (100px for the greendiv and200px for the blue one).

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

• Browsers multiply each transform function's homogeneous coordinates in order—from left to right.

In other words, the computer used the following syntax to compute the greendiv's matrix:

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

And it used the following syntax to calculate the bluediv's matrix:

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

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

Knowing how to convert transform functions tomatrix() 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 tomatrix()

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

• JavaScript'swindow.getComputedStyle() method

• Eric Meyer and Aaron Gustafson's matrix resolution tool

How to usewindow.getComputedStyle() to convert transform functions tomatrix()

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

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

You will add anid attribute to the image element:

<imgsrc="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 theid attribute to get the image element.

2. Use thewindow.getComputedStyle() method to get the image'stransform 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 CSStransform 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 tomatrix()

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

img {transform-origin:00;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: Usematrix3d() 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 thetransform property to any value other thannone. In that case, the browser will create astacking context. And the transformed element will serve as acontaining block to anyabsolute orfixed 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 causeaccessibility issues.

3. Not all elements are transformable

You cannot transform the followingbox models:

• Non-replaced inline elements

• table-column boxes

• table-column-group

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 myCSS Flexbox book. It is a handy quick reference guide that uses images and live examples to explain Flexbox.