CSS 3D Transformation
CSS 3D Transformation enables us to move elements in a three-dimensional space by manipulating their position along the X-axis, Y-axis, and Z-axis.
This type of transformation allows for more realistic and immersive visual effects compared to 2D transformations. Elements can be translated, rotated, scaled, and skewed in three dimensions, creating depth and perspective in the design.
By utilizing CSS 3D Transformation, web designers can achieve various 3D effects, such as rotating objects in 3D space, creating 3D carousels, or simulating 3D environments. This adds a new dimension to web design and enhances the overall user experience.
Transformation Method
Following are the different transformation methods supported by CSS:-
Format |
Description |
translate(x,y) |
used to transform the element along X-axis and Y-axis |
matrix3D(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
It specifies a 3D transformation, using a 4x4 matrix of 16 values. |
translate3D(x,y,z) |
It specifies a 3D translation. |
translateX(x) |
It specifies 3D translation, using only the value for the X-axis. |
translateY(y) |
It specifies 3D translation, using only the value for the Y-axis. |
translateZ(z) |
It specifies 3D translation, using only the value for the Z-axis. |
scale3D(x,y,z) |
It specifies 3D scale transformation |
scaleX(x) |
It specifies 3D scale transformation by giving a value for the X-axis. |
scaley(y) |
It specifies 3D scale transformation by giving a value for the Y-axis. |
scaleZ(z) |
It specifies 3D scale transformation by giving a value for the Z-axis. |
rotateX() method
This method is used to rotate an element around its X-axis according to the given degree.
Input:-
Output:-
rotateY() method
This method is used to rotate an element around its Y-axis according to the given degree.
Input:-
Output:-
rotateZ() method
This method is used to rotate an element around its Z-axis according to the given degree.
Input:-
Output:-