8.11.1. 3D conversion ¶

CSS3 allows you to use 3D transformations to format elements.

In this chapter, you will learn some of these 3D conversion methods:

• rotateX()

• rotateY()

Click on the following elements to see the difference between 2D and 3D transformations:

2D rotate

3D rotate

8.11.2. Browser support ¶

The number in the table represents the first browser version number that supports the property.

The number immediately preceding -webkit- , -ms- , or -moz- is the first browser version number that supports the prefix attribute.

8.11.3. rotateX() method ¶

rotateX() method around which the element rotates on the X axis of a given degree.

Example

div
{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari and Chrome */
}

8.11.4. rotateY() method ¶

rotateY() method around which the element rotates on the Y axis of a given degree.

Example

div
{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari and Chrome */
}

8.11.5. Conversion attribute ¶

The following table lists all the transformation properties: