CSS 3D Transforms

CSS also supports 3D transformations.

Mouse over the elements below to see the difference between a 2D and a 3D transformation:

In this chapter you will learn about the following CSS property:

• transform

---

CSS 3D Transform Functions

With the CSS transform property, you can use the following 3D transformation functions:

• rotateX()
• rotateY()
• rotateZ()

---

The rotateX() Function

The rotateX() function rotates an element around its X-axis at a given degree:

Output :

The rotateY() Function

The rotateY() function rotates an element around its Y-axis at a given degree:

Output :

The rotateZ() Function

The rotateZ() function rotates an element around its Z-axis at a given degree:

Output 3: