1. Web
  2. CSS
  3. perspective

perspective

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨September 2015⁩.

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

perspective: none; 
perspective: 800px; 
perspective: 23rem; 
perspective: 5.5cm; 
<section class="default-example" id="default-example">   <div class="transition-all" id="example-element">     <div class="face front">1</div>     <div class="face back">2</div>     <div class="face right">3</div>     <div class="face left">4</div>     <div class="face top">5</div>     <div class="face bottom">6</div>   </div> </section> 
#default-example {   background: linear-gradient(skyblue, khaki);   perspective: 800px;   perspective-origin: 150% 150%; }  #example-element {   width: 100px;   height: 100px;   perspective: 550px;   transform-style: preserve-3d; }  .face {   display: flex;   align-items: center;   justify-content: center;   width: 100%;   height: 100%;   position: absolute;   backface-visibility: inherit;   font-size: 60px;   color: white; }  .front {   background: rgb(90 90 90 / 0.7);   transform: translateZ(50px); }  .back {   background: rgb(0 210 0 / 0.7);   transform: rotateY(180deg) translateZ(50px); }  .right {   background: rgb(210 0 0 / 0.7);   transform: rotateY(90deg) translateZ(50px); }  .left {   background: rgb(0 0 210 / 0.7);   transform: rotateY(-90deg) translateZ(50px); }  .top {   background: rgb(210 210 0 / 0.7);   transform: rotateX(90deg) translateZ(50px); }  .bottom {   background: rgb(210 0 210 / 0.7);   transform: rotateX(-90deg) translateZ(50px); }

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 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 valuenone
Applies totransformable elements
Inheritedno
Computed valuethe absolute length or none
Animation typea length
Creates stacking contextyes

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

See also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content