2. What is CSS transform?

2.7. The rotateX(), rotateY(), rotateZ() Method


          The rotate() method allows you to rotate the element clockwise or counterclockwise, depending on the angle of rotation. Using the rotateX() method, you will be able to rotate an element on its X-axis at a given angle of rotation. On the other hand, rotateY() is used to rotate an element around its Y-axis at a given degree. The rotateZ() method will rotate the element in its Z-axis at a given degree.



div { transform: rotateX(150deg); }



div { transform: rotateY(130deg); }



div { transform: rotateZ(90deg); }

Note: All elements whose layout is ruled by the CSS box model can be transformed. Exceptions to this property include non-replaced inline boxes, table-column boxes, and table-column-group boxes (Transform, n.d.-b).