6.7 CSS3- THREE-DIMENSIONAL TRANSFORMATION

In CSS3 We can format the elements using 3D transformations. Hear we will learn the following methods of 3D transformation also we will learn about their properties.
rotateX()
rotateY()
rotateZ()
RotateX() Method-
The method rotateX() rotates an element around its X-axis as per the specified degree-
Example-
div{
-webkit-transform: rotateX(90deg); /* statement supported by Safari Browser*/
transform: rotateX(90deg);
}
RotateY() Method-
The method rotateY() rotates an element around its Y-axis as per the specified degree.
Example-
div{
-webkit-transform: rotateY(120deg); /* statement supported by Safari Browser*/
transform: rotateY(120deg);
}
RotateZ() Method-
The method rotateZ() rotates an element around its Z-axis at a 90 degree as specified in the following example-

1

div{
-webkit-transform: rotateZ(90deg); /* statement supported by Safari Browser*/
transform: rotateZ(90deg);
}

2

3

Licensed under the Creative Commons Attribution Share Alike License 4.0

Made with eXeLearning (New Window)