Skip to main content

CSS transform Property – Learn How to Transform HTML Elements

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

Syntax of the transform Property​

html-element {
  transform: value;
}

Let's discuss the values you can assign to the CSS transform property.

CSS transform Property's Values​

Below are some of the values a transform property accepts:

ValueDescription
inherit

Transforms an element with its parent element's transform value.

initialTransforms an element with its default transform value.
matrix()

Transforms an element two-dimensionally with a matrix of six values.

matrix3d()

Transforms an element three-dimensionally with a 4x4 matrix of sixteen values.

noneApplies no transformation to the selected element.
perspective()Transforms a 3D transformed element with a perspective view.
rotate()Transforms an element by rotating it two-dimensionally.
rotate3d()Transforms an element by rotating it three-dimensionally.
rotateX()

Transforms an element by rotating it three-dimensionally along the X-axis.

rotateY()

Transforms an element by rotating it three-dimensionally along the Y-axis.

rotateZ()

Transforms an element by rotating it three-dimensionally along the Z-axis.

scale()Transforms an element by scaling it two-dimensionally.
scale3d()Transforms an element by scaling it three-dimensionally.
scaleX()Transforms an element by scaling it along the X-axis.
scaleY()Transforms an element by scaling it along the Y-axis.
scaleZ()

Transforms an element by scaling it three-dimensionally along the Z-axis.

skew()

Transforms an element by skewing it two-dimensionally along the X- and Y-axis.

skewX()

Transforms an element by skewing it two-dimensionally along the X-axis.

skewY()

Transforms an element by skewing it two-dimensionally along the Y-axis.

translate()

Transforms an element by translating (moving) it two-dimensionally.

translate3d()

Transforms an element by translating (moving) it three-dimensionally.

translateX()

Transforms an element by translating (moving) it along the X-axis.

translateY()

Transforms an element by translating (moving) it along the Y-axis.

translateZ()

Transforms an element by translating (moving) it three-dimensionally along the Z-axis.

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. transform accepts multiple transform functions​

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

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

In the snippet above, we assigned three transform functions to the transform property.

3. List perspective() before other transform functions​

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

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

5. Not all elements are transformable​

You cannot transform the following box models:

Non-replaced vs. Replaced Elements: What's the Difference?​

Non-replaced elements are elements whose content is within the HTML tags. Examples are <strong>, <span>, and <em>.

Replaced elements are elements whose content is outside the HTML tags. Examples are <img>, <video>, and <iframe>.

note

A CSS content property's value is an anonymous replaced element because it does not exist within the HTML tags.

What Are the Benefits of Using the CSS transform Property?​

Below are the two main benefits of the transform property.

  1. transform is cheap to use because browsers apply the transform effect during composition only. (See the CSS triggers table for the specific parts of the pixel pipeline your code triggers when browsers apply a CSS property.)
  2. You can use a device's GPU to hardware-accelerate the transform property.

Overview​

The CSS transform property gives you the tools to transform transformable elements two-dimensionally or three-dimensionally without altering the normal document flow.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Tweet this article