Semantic portal
3D Transforms
Domains:
CSS
CSS 3D Transforms
CSS allows you to format your elements using 3D transformations.
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 | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform |
36.0 12.0 -webkit- |
10.0 |
16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
|
transform-origin (three-value syntax) |
36.0 12.0 -webkit- |
10.0 |
16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
| transform-style |
36.0 12.0 -webkit- |
11.0 |
16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
| perspective |
36.0 12.0 -webkit- |
10.0 |
16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
| perspective-origin |
36.0 12.0 -webkit- |
10.0 |
16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
| backface-visibility |
36.0 12.0 -webkit- |
10.0 |
16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
CSS 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:
#myDiv {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
The rotateY() Method
The rotateY() method rotates an element around its Y-axis at a given degree:
#myDiv {
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}
The rotateZ() Method
The rotateZ() method rotates an element around its Z-axis at a given degree:
#myDiv {
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}
CSS Transform Properties
The following table lists all the 3D transform properties:
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
| transform-style | Specifies how nested elements are rendered in 3D space |
| perspective | Specifies the perspective on how 3D elements are viewed |
| perspective-origin | Specifies the bottom position of 3D elements |
| backface-visibility | Defines whether or not an element should be visible when not facing the screen |
3D Transform Methods
| Function | Description |
|---|---|
|
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
Defines a 3D transformation, using a 4x4 matrix of 16 values |
| translate3d(x,y,z) | Defines a 3D translation |
| translateX(x) | Defines a 3D translation, using only the value for the X-axis |
| translateY(y) | Defines a 3D translation, using only the value for the Y-axis |
| translateZ(z) | Defines a 3D translation, using only the value for the Z-axis |
| scale3d(x,y,z) | Defines a 3D scale transformation |
| scaleX(x) | Defines a 3D scale transformation by giving a value for the X-axis |
| scaleY(y) | Defines a 3D scale transformation by giving a value for the Y-axis |
| scaleZ(z) | Defines a 3D scale transformation by giving a value for the Z-axis |
| rotate3d(x,y,z,angle) | Defines a 3D rotation |
| rotateX(angle) | Defines a 3D rotation along the X-axis |
| rotateY(angle) | Defines a 3D rotation along the Y-axis |
| rotateZ(angle) | Defines a 3D rotation along the Z-axis |
| perspective(n) | Defines a perspective view for a 3D transformed element |