To activate 3D space, an element needs perspective. This can be applied in two ways: using the
transform property, with the perspective as a functional notation.
transform: perspective( 600px );
or using the
NOTE: for the sake of brevity in the example code, I am using the un-prefixed CSS properties, i.e.
perspective. In actual use, you’ll have to use vendor-prefixed versions:
See Example: Perspective 1
These two formats both trigger a 3D space, but there is a difference. The functional notation is convenient for directly applying a 3D transform on a single element (in the previous example, I use it in conjunction with a
rotateX transform). But when used on multiple elements, the transformed elements don’t line up as expected. If you use the same transform across elements with different positions, each element will have its own vanishing point. To remedy this, use the
perspective property on a parent element, so each child may share the same 3D space.
See Example: Perspective 2
The value of
perspective determines the intensity of the 3D effect. Think of it as a distance from the viewer to the object. The greater the value, the further the distance, the less intense the visual effect.
perspective: 2000px; yields a subtle 3D effect, as if we are viewing an object from far away through binoculars.
perspective: 100px; produces a tremendous 3D effect, like a tiny insect viewing a massive object.
By default, the vanishing point for a 3D space is positioned at the center. You can change the position of the vanishing point with
perspective-origin: 25% 75%;
See Example: Perspective 3
Next: 3D transform functions »