CSS transform property

Description

CSS transform property may rotate, translate, and scale up the size of an element.

The parent element must have perspective property to see the 3D effect of the transform. In the demo, the element's parent box has perspective: 300px; property.

Syntax

transform : none | translate() | rotate() | scale() | skew()

Property values

translate()

translateX(50px)

This value translates the box by 50px along X-axis.

transform: translateX(50px);

translateY(50px)

It translates the box by 50px along Y-axis.

transform: translateY(50px);

translateZ(50px)

It translates the box by 10px along Z-axis i.e. towards the user. In this case, you will see zoom-in effect.

transform: translateZ(50px);

translate3D(50px,50px,50px)

This value translates the box by 50px along all of the three axes (X, Y, and Z axes).

transform: translate3D(50px,50px,50px);


rotate

rotateX(50deg)

This value rotates the box around X-axis by 50 degree.

transform: rotateX(50deg);

rotateY(50deg)

This value rotates the box around Y-axis by 50 degree

transform: rotateY(50deg);

rotateZ(50deg)

It rotates the box clockwise by 50 degree.

transform: rotateZ(50deg);

rotate(50deg)

It is the same as rotateZ(50deg) i.e. element rotates clockwise by 50 degree.

transform: rotate(50deg);


scale

scaleX(2)

It is 2 times the original width.

transform: scaleX(2);

scaleY(2)

It is 2 times the original height.

transform: scaleY(2);

scale(2,3)

It is 2 times the original width and 3 times the original height.

transform: scale(2,3);


skew()

skewX(40deg)

It skews a box by 40 degree along X-axis.

transform: skewX(30deg);

skewY(40deg)

It skews a box by 40 degree along Y-axis.

transform: skewY(40deg);

skew(40deg,40deg)

It skews a box by 40 degree along both X and Y axes.

transform: skew(40deg,40deg);

Applicable to

It applies to transformable elements.

#CSS digger
Was this article helpful?

 
arrow
We are learning transform property.
×

Ctrl+D