CSS3 3D transform feature allows elements to be transformed in 3D space. CSS3 3D transform feature you can perform basic transform manipulations such as move, rotate, scale and skew on elements in a three-dimensional space.
CSS3 3D Transform-properties
Following are 3D transformation methods:
rotateX()rotateY()rotateZ()
rotateX() Method
This method is use to rotate
#myDiv {
transform: rotateX(200deg);
}
rotateY() Method
This method is use to rotate
#myDiv {
transform: rotateY(200deg);
}
rotateZ() Method
This method is use to rotate an element around its Z-axis at a given degree:
#myDiv {
transform: rotateZ(90deg);
}
CSS3 Transform functions
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | This function is used to define a 3D transformation, using a 4×4 matrix of 16 values |
| translate3d(x,y,z) | 3D translation |
| translateX(x) | 3D translation, using only the value for the X-axis |
| translateY(y) | a 3D translation, using only the value for the Y-axis |
| translateZ(z) | This function is used to define a 3D translation, using only the value for the Z-axis |
| scale3d(x,y,z) | This function is used to define a 3D scale transformation |
| scaleX(x) | This function is used to define a 3D scale transformation by giving a value for the X-axis |
| scaleY(y) | This function is used to define a 3D scale transformation by giving a value for the Y-axis |
| scaleZ(z) | This function is used to define a 3D scale transformation by giving a value for the Z-axis |
| rotate3d(x,y,z,angle) | This function is used to define a 3D rotation |
| rotateX(angle) | This function is used to define a 3D rotation along the X-axis |
| rotateY(angle) | This function is used to define a 3D rotation along the Y-axis |
| rotateZ(angle) | This function is used to define a 3D rotation along the Z-axis |
| perspective(n) | This function is used to define a perspective view for a 3D transformed element |