CSS perspective Property

What You’ll Learn

The perspective property creates a 3D viewing space for child elements. It is essential for realistic depth when using transforms like rotateY.

Introduction

The perspective property in CSS is used to give a 3D effect to elements by defining the distance between the viewer and the z=0 plane. It is crucial for creating depth and realistic 3D transformations in web design.

When applied to a container, it affects all child elements and their 3D transformations, making it an essential property for achieving dynamic visual effects.

Definition and Usage

Put perspective on a parent wrapper, then apply 3D transforms such as rotateY() or rotateX() on the children. Without perspective, those transforms can look flat because the browser has no viewing distance to calculate depth from.

Smaller values create a stronger 3D effect because the viewer is closer. Larger values feel more subtle and farther away.

📝 Syntax

The syntax for the perspective property is as follows:

element {
  perspective: value;
}

Here, value is the distance from the viewer to the z=0 plane. It can be specified in pixels (px) or other length units like em or rem.

Basic Example

.perspective-container {
  perspective: 500px;
}

.box {
  transform: rotateY(45deg);
}

Syntax Rules

• Apply perspective to the parent container that wraps transformed children.
• Use a length value such as 500px or the keyword none.
• Smaller lengths increase the intensity of the 3D effect.
• Pair with transform on child elements for visible results.
• For flip cards, also use transform-style: preserve-3d on the child.
• Combine with perspective-origin to move the vanishing point.

🎯 Default Value

The default value of the perspective property is none. This means no perspective effect is applied, and 3D transformations will not create a sense of depth.

💎 Property Values

The perspective property accepts a keyword or a length that sets the viewing distance.

When Does perspective Matter?

perspective is the foundation for believable 3D motion and layout on the web:

• Flip cards — Rotate front and back faces in a shared 3D scene.
• Product showcases — Tilt boxes or device mockups with rotateY.
• Interactive galleries — Fan out multiple panels from one perspective container.
• Hover animations — Smoothly transition between angled and flat states.

If children only use 2D transforms such as translateX or scale, perspective may have little visible effect.

Examples Gallery

Start with the reference hover box, compare perspective distances, build a flip card, and arrange a 3D gallery row.

<style>
  .perspective-container {
    perspective: 500px;
  }

  .box {
    width: 100px;
    height: 100px;
    background-color: coral;
    transform: rotateY(45deg);
    transition: transform 0.5s;
  }

  .box:hover {
    transform: rotateY(0deg);
  }
</style>

<h1>3D Perspective Example</h1>
<div class="perspective-container">
  <div class="box"></div>
</div>

<style>
  .near { perspective: 300px; }
  .far { perspective: 1000px; }
  .card { transform: rotateY(50deg); }
</style>

<style>
  .card-scene {
    perspective: 900px;
  }

  .card {
    transform-style: preserve-3d;
    transition: transform 0.6s;
  }

  .card:hover {
    transform: rotateY(180deg);
  }
</style>

<style>
  .gallery-scene {
    perspective: 700px;
    display: flex;
    gap: 1rem;
  }

  .tile:nth-child(1) { transform: rotateY(-25deg); }
  .tile:nth-child(3) { transform: rotateY(25deg); }
</style>

perspective vs perspective-origin

perspective sets how far away the viewer is. perspective-origin sets where the vanishing point sits on the parent.

Use both together when you need depth and control over the angle of the 3D scene — for example, tilting a card row toward the left or right.

.scene {
  perspective: 800px;
  perspective-origin: left center;
}

.panel {
  transform: rotateY(30deg);
}

💡 Best Practices