perspective

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

IE	Edge	Firefox	Chrome	Safari	Opera
10	All	10 1	12 2	4 2	15 2

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
All	All	3 2	3.2 2	62

Related