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;
Indicates that no perspective transform is to be applied.
<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
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
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.
|Applies to||transformable elements|
|Computed value||the absolute length or |
|Animation type||a length|
|Creates stacking context||yes|
An example showing how a cube varies if the
perspective is set at different positions is given in Using CSS transforms > Setting perspective.
|CSS Transforms Module Level 2 (CSS Transforms 2)|
BCD tables only load in the browser