CSS transform property

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);