CSS transform property

Property values

translate()

translateX(50px)

50

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

transform: translateX(50px);

Try it { }

translateY(50px)

50

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

transform: translateY(50px);

Try it { }

translateZ(50px)

50

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

Try it { }

translate3D(50px,50px,50px)

50

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

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

Try it { }

rotate

rotateX(50deg)

50

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

transform: rotateX(50deg);

Try it { }

rotateY(50deg)

50

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

transform: rotateY(50deg);

Try it { }

rotateZ(50deg)

50

It rotates the box clockwise by 50 degree.

transform: rotateZ(50deg);

Try it { }

rotate(50deg)

50

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

transform: rotate(50deg);

Try it { }

scale

scaleX(2)

It is 2 times the original width.

transform: scaleX(2);

Try it { }

scaleY(2)

It is 2 times the original height.

transform: scaleY(2);

Try it { }

scale(2,3)

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

transform: scale(2,3);

Try it { }

skew()

skewX(40deg)

30

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

transform: skewX(30deg);

Try it { }

skewY(40deg)

40

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

transform: skewY(40deg);

Try it { }

skew(40deg,40deg)

40

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

transform: skew(40deg,40deg);

Try it { }