CSS 3D Transforms
CSS 3D Transforms
The CSS transform
property is also used to apply a 3D transformation to an element.
To activate a 3D space, the element needs perspective. The perspective defines the distance between the user's viewpoint and the element. Without perspective, any 3D transforms will look flat and two-dimensional.
You will learn more about Perspective in the next chapter.
Core 3D Transforms Functions
Within the transform
property it is common to use
the following 3D functions:
The CSS rotateX() Function
The rotateX() function
rotates an element around its x-axis at a given degree.
This means that it tilts an element forward or backward:
The CSS rotateY() Function
The rotateY() function
rotates an element around its y-axis at a given degree.
This means that it swivels an element left or right (like a swinging door):
The CSS rotateZ() Function
The rotateZ() function
rotates an element around its z-axis at a given degree.
This means that it spins the element flat on the screen (at a given degree):
The CSS translateZ() Function
The translateZ() function repositions an
element along the z-axis in 3D space.
This means that it moves the element closer to or farther away from the viewer.
A positive value moves the element closer to the viewer. A negative value moves the element farther away from the viewer:
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 | Defines the distance between the user's viewpoint and the element |
| 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 |
Core 3D Transform Functions
| Function | Description |
|---|---|
| rotateX() | Rotates an element around its horizontal axis (x-axis) |
| rotateY() | Rotates an element around its vertical axis (y-axis) |
| rotateZ() | Rotates an element around the depth axis (z-axis) |
| perspective() | Defines the distance between the user's viewpoint and the element |
| translateZ() | Moves an element closer or further |
| scaleZ() | Scales the element's depth along the z-axis |
