CSS perspective Property

Description

The perspective property in CSS is a fundamental tool for creating three-dimensional effects in web design. It is primarily used in conjunction with CSS transformations like "rotateX," "rotateY," and "rotateZ" to control the depth and perspective of elements on a webpage. By defining a value for "perspective," you establish a viewpoint from which the 3D transformations are observed, giving a sense of depth and realism to objects. Smaller values make objects appear more dramatic and closer together, while larger values create a subtler, more distant perspective. Overall, the "perspective" property is essential for enhancing the visual depth and interactivity of web content, especially when creating engaging user interfaces and animations.

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

Interactive Demo

perspective: none;

perspective: 100px;

perspective: 23rem;

perspective: 5.5cm;

front

back

right

left

top

bottom

Syntax

perspective: none | <length>

Values

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

Example

HTML

<div class="container">

   <div class="rotate">Rotated box...</div>

</div>

CSS

div.container {
  padding: 20px;
  perspective: 100px;
  margin-left: 30px;
}
div.rotate {
  width: 100px;
  padding: 30px;
  text-align: center;
  background: gold;
  transform: rotateX(15deg);
}

Result

Editor