CSS – 3D Transform

For the 3D Transformation of elements on a web page, you can use the transform property in CSS. The transform property is used with some methods to accomplish the task. Let us see the methods with examples:

  • rotateX(): Rotate an element around X-axis
  • rotateY(): Rotate an element around Y-axis
  • rotateZ(): Rotate an element around Z-axis

Rotate an element around X-axis

To rotate an element around the X-axis, use the rotateX() method in CSS. Set the angle of rotation as a parameter of the method. Let us now see an example:

Output

CSS 3D Tranform Rotate around x axis

Rotate an element around Y-axis

To rotate an element around the Y-axis, use the rotateY() method in CSS. Set the angle of rotation as a parameter of the method. Let us now see an example:

Output

CSS 3D Tranform Rotate around y axis

Rotate an element around Z-axis

To rotate an element around the Z-axis, use the rotateZ() method in CSS. Set the angle of rotation as a parameter of the method. Let us now see an example:

Output
CSS 3D Tranform Rotate around z axis
If you liked the tutorial, spread the word and share the link and our website Studyopedia with others.


Read More:

CSS - Padding
CSS - 2D Transform
Studyopedia Editorial Staff
[email protected]

We work to create programming tutorials for all.

No Comments

Post A Comment

Discover more from Studyopedia

Subscribe now to keep reading and get access to the full archive.

Continue reading