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. It gives you the tools to transform transformable elements two-dimensionally or three-dimensionally without altering the normal document flow.

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:

Value	Description
inherit	Transforms an element with its parent element’s transform value.
initial	Transforms 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.
none	Applies 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.

CodeSweetly ads

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 inline boxes
• table-column boxes
• table-column-group boxes

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.