i

Learn HTML and CSS in 10 Days

CSS 3D Transforms

This property helps in moving element to X, Y and Z axis. Let’s have a look at the 3D transform methods:

  • matrix3D(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) – A 3D transformation is specified using a 3D transformation.

  • translate3D(x,y,z) – It is for a 3D translation.

  • translateX(x) – 3D translation only with the help of the values of the X-axis.

  • translateY(y) - 3D translation only with the help of the values of the Y-axis.

  • translateZ(z) - 3D translation only with the help of the values of the Z-axis.

  • scale3D(x,y,z) –3D scale transformation is specified using this.

  • scaleY(y) - 3D scale transformation is specified using the Y-axis value.

  • scaleX(x) - 3D scale transformation is specified using the X-axis value.

  • scaleZ(z) - 3D scale transformation is specified using the Z-axis value.

  • rotate3D(X,Y,Z, angle) – 3D rotation is specified using this.

  • rotateX(angle) – 3D rotation is specified along X-axis.

  • rotateY(angle) – 3D rotation is specified along Y-axis.

  • rotateZ(angle) – 3D rotation is specified along Z-axis.

Let’s see the 3D rotate example along X-axis.