CSS3 3D Transforms - The rotateX(), rotateY() Method

CSS3 3D Transforms

   CSS3 allows you to format your elements using 3D transforms.

 The 3D transforms methods are:

• rotateX()
• rotateY()

 Browser Support:

 Internet Explorer, Firefox, and Opera does not yet support the 3D transform methods.
 Chrome and Safari requires the prefix -webkit-.
 Let’s see the difference between a 2D transform and a 3D transform:

 A. The rotateX() Method:
 With the rotateX() method, the element rotates around its X-axis at a given degree.

Syntax:   

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

 B. The rotateY() Method:

 With the rotateY() method, the element rotates around its Y-axis at a given degree.
Syntax:   
 div
 {
 transform: rotateY(130deg);
 -webkit-transform: rotateY(130deg); /* Safari and Chrome */
 }