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
10	12	36	16	23	9
Tablets / Mobile
4.4	36	16	24	9	3.0

Last updated by CSSPortal on: 3rd November 2019