Course Recommendation:

CSS perspective() Function

Definition and Usage perspective() CSS

perspective() Function defines the distance between the user and the z=0 plane. transform in the property.

Example

Using perspective() Add some perspective effects to the two cubes:

.cube1 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(5cm) rotateX(-15deg) rotateY(30deg);
}
.cube2 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(10cm) rotateX(-15deg) rotateY(30deg);
}

Try It Yourself

CSS Syntax

perspective(length|none)
Value Description
length Required. Specifies the distance of the user to the z=0 plane. 'none' means no transformation.

Technical Details

Version: CSS Transforms Module Level 2

Browser Support

The numbers in the table represent the first browser version to fully support this function.

Chrome Edge Firefox Safari Opera
perspective()
12 12 10 4 15
perspective(none)
97 97 93 15.4 83

Related Pages

Tutorial:CSS 3D Transformation

Reference:CSS transform attribute

Reference:CSS rotate() Function

Reference:CSS rotate3d() Function

Reference:CSS rotateX() Function

Reference:CSS rotateY() function

Reference:CSS rotateZ() function