CSS perspective Property

Definition and Usage

The perspective property sets the distance between the viewer and the z=0 plane. Put it on a parent. Children that use 3D transform values such as rotateY() then look foreshortened instead of flat.

Smaller lengths look stronger. Larger lengths look subtler. Move the vanishing point with perspective-origin. This property is not the same as the perspective() transform function, which applies depth to the transformed element itself.

CSS Syntax

Lengths must be non-negative. Values under 1px clamp to 1px. Negative lengths are invalid.

Property Values

How to Use perspective

Frame a scene on the parent, then rotate or translate a child in 3D.

1. Set perspective on the parent container (not usually on the rotated element).
2. Give a child a 3D transform such as rotateY(45deg) or translateZ().
3. Tune the length: start near 500px, then try shorter for drama or longer for subtlety.
4. Adjust the vanishing point with perspective-origin when the scene should skew off-center.

Live Preview

Same card, same rotateY(45deg). Change only the parent’s perspective.

CSS Examples

Each snippet focuses on perspective. Use Try It Yourself for a live editor.

<style>
  section {
    perspective: 500px;
  }

  div {
    width: 120px;
    height: 80px;
    background: #1d4ed8;
    color: #fff;
    text-align: center;
    line-height: 80px;
    transform: rotateY(45deg);
  }
</style>

<section>
  <div>Card</div>
</section>

<style>
  .near {
    perspective: 200px;
  }

  .far {
    perspective: 1000px;
  }

  div {
    width: 120px;
    height: 80px;
    background: #1d4ed8;
    color: #fff;
    text-align: center;
    line-height: 80px;
    transform: rotateY(45deg);
  }
</style>

<section class="near">
  <div>Near</div>
</section>

<section class="far">
  <div>Far</div>
</section>

<style>
  section {
    perspective: none;
  }

  div {
    width: 120px;
    height: 80px;
    background: #1d4ed8;
    color: #fff;
    text-align: center;
    line-height: 80px;
    transform: rotateY(45deg);
  }
</style>

<section>
  <div>Flat</div>
</section>

Key Takeaways