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.
Try it
Syntax
css
/* Keyword value */
perspective: none;
/* <length> values */
perspective: 20px;
perspective: 3.5em;
/* Global values */
perspective: inherit;
perspective: initial;
perspective: revert;
perspective: revert-layer;
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 than1px
, it is clamped to1px
.
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
perspective =
none |
<length [0,∞]>
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 |
Browser compatibility
BCD tables only load in the browser