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.
TheperspectiveCSS 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> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>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
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 ofperspective cause a small transformation;small values ofperspective 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 theperspective CSS property — are not drawn.
Thevanishing point is by default placed at the center of the element, but its position can be changed using theperspective-origin property.
Using this property with a value other thannone creates a newstacking context. Also, in that case, the object will act as a containing block forposition: fixed elements that it contains.
Formal definition
| Initial value | none |
|---|---|
| Applies to | transformable elements |
| Inherited | no |
| Computed value | the absolute length ornone |
| Animation type | alength |
| Createsstacking context | yes |
Formal syntax
perspective =
none|
<length [0,∞]>
Examples
Setting perspective
An example showing how a cube varies if theperspective is set at different positions is given inUsing CSS transforms > Setting perspective.
Specifications
| Specification |
|---|
| CSS Transforms Module Level 2 # perspective-property |