The perspective CSS property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.

/* Keyword value */ perspective: none;  /* <length> values */ perspective: 20px; perspective: 3.5em;  /* Global values */ perspective: inherit; perspective: initial; perspective: revert; perspective: unset; 

perspective

The perspective CSS property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.

Syntax

/* Keyword value */ perspective: none;  /* <length> values */ perspective: 20px; perspective: 3.5em;  /* Global values */ perspective: inherit; perspective: initial; perspective: revert; perspective: unset; 

Values

none

Indicates that no perspective transform is to be applied.

<length>

A <length> giving the distance from the user to the z=0 plane. It is used to apply a perspective transform to the children of the element. Negative values are syntax errors. If the value is smaller than 1px, it is clamped to 1px.

Description

Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property. Large values of perspective cause a small transformation; small values of perspective cause a large transformation.

The parts of the 3D elements that are behind the user — i.e. their z-axis coordinates are greater than the value of the perspective CSS property — are not drawn.

The vanishing point is by default placed at the center of the element, but its position can be changed using the perspective-origin property.

Using this property with a value other than none creates a new stacking context. Also, in that case, the object will act as a containing block for position: fixed elements that it contains.

Formal definition

Initial value	none
Applies to	transformable elements
Inherited	no
Computed value	the absolute length or none
Animation type	a length
Creates stacking context	yes

Formal syntax

none | <length>

Examples

Setting perspective

An example showing how a cube varies if the perspective is set at different positions is given in Using CSS transforms > Setting perspective.

Specifications

Specification
CSS Transforms Module Level 2 # perspective-property

See also

Using CSS Transforms

Last modified: Nov 10, 2021, by MDN contributors

Select your preferred language English (US)EspañolFrançais日本語Русский中文 (简体) Change language