CSS 3D Transforms
It allows you to change elements using 3D transformations. In 3D transformation, the elements are rotated along X-axis, Y-axis and Z-axis.
There are three main types of transformation which are listed below:
- rotateX()
- rotateY()
- rotateZ()
1. rotateX():
This rotation is used to rotate an element around the X-axis at a given degree.
2. rotateY():
This method is used to rotate an element around the Y-axis at given degrees.
3. rotateZ():
This method is used to rotate an element around the Z-axis at given degrees.
CSS transforms properties
- CSS transforms are defined by two major properties: transform as well as transform-origin.
- Specifies the origin's position. It is located in the center of the element by default and can be moved. It is used by several transforms that require a specific point as a parameter, such as rotations, scaling, or skewing.
Transform
Specifies the transforms that will be applied to the element. It is a space-separated list of transforms that are applied sequentially as specified by the composition operation. Composite transforms are most effectively used from right to left.
3D specific CSS properties
CSS transformations in 3D space are a little more difficult. You must first configure the 3D space by assigning it a perspective, and then you must configure how your 2D elements will behave in that space.
Perspective
The perspective is the first thing to establish. The perspective is what creates the 3D effect. The elements become smaller as they get further away from the viewer.
Setting perspective
This example depicts a cube with the perspective set at various positions. The perspective property determines how quickly the cube shrinks. The deeper the perspective, the lower its value.