 space.){kind=link}
 space.){kind=link}
CSS 3D Transforms
3D Transforms
3D transforms allow us to perform basic transformation such as move, rotate, scale and skew on elements in a three-dimensional (i.e x-axis, y-axis and z-axis) space. There are various 3D transforms methods available, which are given below-
| Function | Description |
|---|---|
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | It defines a 3D transformation, using a 4x4 matrix (i.e. 16 values). |
| translate3d(x,y,z) | It defines a 3D translation. |
| translateX(x) | It defines a 3D translation using X-axis value. |
| translateY(y) | It defines a 3D translation using Y-axis value. |
| translateZ(z) | It defines a 3D translation using Z-axis value. |
| scale3d(x,y,z) | It defines a 3D scale transformation. |
| scaleX(x) | It defines a 3D scale transformation using X-axis value. |
| scaleY(y) | It defines a 3D scale transformation using Y-axis value. |
| scaleZ(z) | It defines a 3D scale transformation using Z-axis value. |
| rotate3d(x,y,z,angle) | It defines a 3D rotation. |
| rotateX(angle) | It defines a 3D rotation along the X-axis. |
| rotateY(angle) | It defines a 3D rotation along the Y-axis. |
| rotateZ(angle) | It defines a 3D rotation along the Z-axis. |
| perspective(n) | It defines a perspective view for a 3D transformed element. |