• Post category:CSS

What is Transform Property in CSS

What is Transform Property in CSS

This article about what is transform property in CSS.

Transform property

CSS transform property allows you to transform an HTML element. With the help of the transform property, you can change the position, orientation, size, and slant of an HTML element.

Transform means translate, rotate, scale, and skew

  • Translate means changing the position of an HTML element.
  • Rotate means changing the orientation of an HTML element.
  • Scale means changing the size of an HTML element.
  • Skew means changing the slant of an HTML element.

Syntax of the transform property

transform: one or more transform functions + perspective function

1D Transform functions 2D Transform functions 3D Transform functions
translateX(x)

translateY(y)

translateZ(z)

translate(x,y) translate3D(x,y,z)
Note : x and y in px or %, z in px
rotateX(x)

rotateY(y)

rotateZ(z)

rotate(x,y) rotate3D(x,y,z)
Note: x, y, z in deg
scaleX(x)

scaleY(y)

scaleZ(z)

scale(x, y) scale3D(x, y, z)
Note: x, y, z in number
skewX(x)

skewY(y)

skew(x,y)
Note: x, y in deg

We have 1D transform, 2D transform, and 3D transform functions. We also take the help of the perspective function to set the depth. If you want to transform an HTML element (one axis) at a time, then you take the help of the 1D transform function. If you want to transform an HTML element (X and Y axis) at a time, then you take the help of the 1D transform function. If you want to transform an HTML element in (all the axis) at a time, then you take the help of the 3D transform function.

See the above table, the translate Y, translate Y and translate Z fuctions help you in translating an HTML element in XYZ axis independently. If you want to translate an HTML in X and Y axis at a time, then you can take help of translate function. If you want to translate an HTML in all three axis at a time, then you can take help of translate function. While translating x and y value can be in pixels or percentage and z value must be in pixels.

If you want to rotate an HTML elemtnin x,y and z axis independently then you can take help of rotateX, rotateY and rotateZ fuction. same as translate function must be followed by rotate, smale and skew fucntion.

Perspective function: is used to define depth (z in pixels)

Examples of transform property.

Translate

div{
width: 100px;
height: 100px;
background-color: lightblue;
transform: perspective(400px) translateZ(-100px); }

Output:

what is transform property in css

Rotate

div{
width: 100px;
height: 100px;
background-color: lightblue;
transform: perspective(400px) rotate(45deg); }

Output:

what is transform property in css

Scale

div{
width: 100px;
height: 100px;
background-color: lightblue;
transform: perspective(400px) scale(2);
}

Output:

what is transform property in css

Skew

div{
width: 100px;
height: 100px;
background-color: lightblue;
transform: perspective(400px) skew(45deg);
}

Output:

what is transform property in css

Leave a Reply