Perspective

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 perspective property:

perspective: 600px;

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: -webkit-perspective, -moz-perspective, etc.

See Example: Perspective 1

Perspective property at work

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

Perspective differences when used with child elements

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 property.

perspective-origin: 25% 75%;

See Example: Perspective 3

Intense perspective value, with vanishing point modified


Next: 3D transform functions »