perspective

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Learn Development at Frontend Masters

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.

.parent {
  perspective: 1000px;
}

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

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.

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.

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.

Syntax

perspective: none | <length>;
  • Initial value: none
  • Applies to: transformable elements
  • Inherited: no
  • Percentages: n/a
  • Computed value: the keyword none or an absolute length
  • Animation type: by computed value

Values

/* Keyword value */
perspective: none;

/* Length values */
perspective: 10px;
perspective: 2rem;

/* Global values */
perspective: inherit;
perspective: initial;
perspecive: revert;
perspective: unset;

Browser support

IEEdgeFirefoxChromeSafariOpera
10All10 112 24 215 2
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mobile
AllAll3 23.2 262
Source: caniuse

1 Firefox 10-15 supported with prefix -moz-
2 Chrome 12-35, Safari 4-8, Safari iOS 3.2-8.4, Opera 3.2, and Android Browser 3-4.4.4 supported with prefix -webkit-