CSS3 3D Transforms
CSS3 3D Transforms
CSS3 allows you to format your elements using 3D transformations.
You can switch off all transformations applied to an element using the none function: transform: none;
Mouse over the elements below to see the difference between a 2D and a 3D transformation:
Browser Support for 3D Transforms
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
| Property | ||||||
|---|---|---|---|---|---|---|
| transform | 36.0 12.0 -webkit- |
12.0 | 10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-origin (three-value syntax) |
36.0 12.0 -webkit- |
12.0 | 10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-style | 36.0 12.0 -webkit- |
12.0 | 11.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective | 36.0 12.0 -webkit- |
12.0 | 10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective-origin | 36.0 12.0 -webkit- |
12.0 | 10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| backface-visibility | 36.0 12.0 -webkit- |
12.0 | 10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
CSS3 3D Transforms
In this chapter you will learn about the following 3D transformation methods:
rotateX()rotateY()rotateZ()
The rotateX() Method
The rotateX() method rotates an element around its X-axis at a given degree:
Example
div
{
-webkit-transform: rotateX(160deg); /* Safari */
transform: rotateX(160deg);
}
Try it yourself »
The rotateY() Method
The rotateY() method rotates an element around its Y-axis at a given degree:
Example
div
{
-webkit-transform: rotateY(120deg); /* Safari */
transform: rotateY(120deg);
}
Try it yourself »
The rotateZ() Method
The rotateZ() method rotates an element around its Z-axis at a given degree:
Example
div
{
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}
Try it yourself »