CSS perspective Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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