perspective(d) 

perspective()

The perspective() CSS function defines a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were 3-dimensional. Its result is a <transform-function> data type.

The perspective() transform function is part of the transform value applied on the element being transformed. This differs from the perspective and perspective-origin properties which are attached to the parent of a child transformed in 3-dimensional space.

Syntax

The perspective distance used by perspective() is specified by a <length> value, which represents the distance between the user and the z=0 plane, or by none. The z=0 plane is the plane where everything appears in a 2-dimensional view, or the screen. Negative values are syntax errors. Values smaller than 1px (including zero) are clamped to 1px. Values other than none cause elements with positive z positions to appear larger, and elements with negative z positions to appear smaller. Elements with z positions equal to or larger than the perspective value disappear as though they are behind the user. Large values of perspective represent a small transformation; small values of perspective() represent a large transformation; perspective(none) represents perspective from infinite distance and no transformation.

perspective(d) 

Values

Is a <length> representing the distance from the user to the z=0 plane. If it is 0 or a negative value, no perspective transform is applied.

Examples

HTML

<p>Without perspective:</p> <div class="no-perspective-box">   <div class="face front">A</div>   <div class="face top">B</div>   <div class="face left">C</div> </div>  <p>With perspective (9cm):</p> <div class="perspective-box-far">   <div class="face front">A</div>   <div class="face top">B</div>   <div class="face left">C</div> </div>  <p>With perspective (4cm):</p> <div class="perspective-box-closer">   <div class="face front">A</div>   <div class="face top">B</div>   <div class="face left">C</div> </div> 

CSS

.face {   position: absolute;   width: 100px;   height: 100px;   line-height: 100px;   font-size: 100px;   text-align: center; }  p + div {   width: 100px;   height: 100px;   transform-style: preserve-3d;   margin-left: 100px; } .no-perspective-box {   transform: rotateX(-15deg) rotateY(30deg); }  .perspective-box-far {   transform: perspective(9cm) rotateX(-15deg) rotateY(30deg); }  .perspective-box-closer {   transform: perspective(4cm) rotateX(-15deg) rotateY(30deg); }  .top {   background-color: skyblue;   transform: rotateX(90deg) translate3d(0, 0, 50px); }  .left {   background-color: pink;   transform: rotateY(-90deg) translate3d(0, 0, 50px); }  .front {   background-color: limegreen;   transform: translate3d(0, 0, 50px); } 

Result

Specifications

See also