CSS perspective Property

Description

The perspective property determines the distance from the screen plane to the point of convergence of the lines and thereby determines how pronounced the effect of perspective. The default convergence point is located in the center of the element and can be changed using the perspective-origin property.

Initial value
none
Applies to
Transformable elements
Inherited
No
Media
Visual
Computed value
Absolute length or 'none'.
Animatable
As <length>
CSS Version
CSS3
JavaScript syntax
object.style.perspective

Syntax

perspective: none | <length>

Values

  • noneNo perspective transform is applied.
  • <length>Distance to the center of projection.

Example

<div class="container">
<div class="rotate">Rotated box...</div>
</div>
div.container {
  padding: 20px;
  perspective: 100px;
  margin-left: 30px;
}
div.rotate {
  width: 100px;
  padding: 30px;
  text-align: center;
  background: gold;
  transform: rotateX(15deg);
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
10123616239
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
4.436162493.0

Last updated by CSSPortal on: 3rd November 2019