perspective

Last updated on: March 25, 2013

The perspective CSS property gives an element a 3D-space by affecting the distance between the Z plane and the user.

The strength of the effect is determined by the value. The smaller the value, the closer you get from the Z plane and the more impressive the visual effect. The greater the value, the more subtle will be the effect.

Important: Please note the perspective property doesn't affect how the element is rendered; it simply enables a 3D-space for children elements. This is the main difference between the transform: perspective() function and the perspective property. The first gives element depth while the later creates a 3D-space shared by all its transformed children.

/**
 * Syntax
 * perspective: none | <length> 
 */

.parent {
    perspective: 1000px;
}

.child {
    transform: rotateY(50deg);
}

Check out this Pen!

The above demo aims at showing the difference between the function and the property.

• On the left side, you can see the property applied to the parent (perspective: 50em) of transformed elements (transform: rotateY(50deg)).
• On the right side, the perspective is applied from the transform directly on children (transform: perspective(50em) rotateY(50deg)).

This shows how setting perspective on the parent make all children share the same 3D-space and thus the same vanishing point.

Let's try something even cooler: a cube with 3D transforms and perspective.

Check out this Pen!

Here is how the cube is made: it relies on two nested wrappers (one to give the cube perspective and one to wrap all the sides) and 6 elements to make the sides. Each element is given its own transform mixing translating and rotating in the 3D-space (e.g. transform: rotateX(90deg) translateZ(1em)).

Let's finish with a demo featuring what could be the base of a real world design: a wall of photographs + captions using perspective and transform.

Check out this Pen!

When hovering over the wall, the children are rotated back to their normal position, cancelling the effect.

Important! Using perspective (with a value different from 0 or none) creates a new stacking context.

Related Properties

• perspective-origin
• transform
• transform-style

Other Resources

• Perspective in the CSS specifications
• Perspective on MDN
• Perspective by David DeSandro

Browser Support

Firefox 10-15 need -moz-, WebKit browsers may need -webkit-