W3cubDocs

/CSS

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

/* 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 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

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`perspective`	3612	1212	164910	2315	94	3618	164910	2414	9 In iOS 13, the `perspective` property did not function properly. The issues were fixed in iOS 14. 2	3.01.0	4.43	9 In iOS 13, the `perspective` property did not function properly. The issues were fixed in iOS 14. 2
`none`	12	12	10	15	4	18	10	14	3.2	1.0	4.4	3.2