CssHow-ToBeginner · 4 min read

How to Use Perspective in CSS for 3D Effects

Use the perspective property in CSS on a container to give child elements a 3D depth effect. It defines how far the viewer is from the z=0 plane, making 3D transforms like rotateY look realistic.

📐

Syntax

The perspective property is applied to a container element and takes a length value that sets the distance between the viewer and the 3D scene. A smaller value means a stronger 3D effect, while a larger value makes the effect subtler.

Example parts:

perspective: 500px; — sets the perspective distance to 500 pixels.
perspective-origin (optional) — sets the vanishing point position.

css

selector {
  perspective: 500px;
  perspective-origin: 50% 50%; /* optional, default center */
}

💻

Example

This example shows a square rotated in 3D using transform: rotateY(45deg) inside a container with perspective. The perspective makes the rotation look like it has depth.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS Perspective Example</title>
<style>
  .container {
    perspective: 400px;
    width: 200px;
    height: 200px;
    margin: 50px auto;
    border: 1px solid #ccc;
  }
  .box {
    width: 100%;
    height: 100%;
    background-color: #4a90e2;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.5rem;
    transform-style: preserve-3d;
    transform: rotateY(45deg);
    transition: transform 0.5s ease;
  }
  .container:hover .box {
    transform: rotateY(0deg);
  }
</style>
</head>
<body>
  <div class="container" aria-label="3D rotated box">
    <div class="box">3D Box</div>
  </div>
</body>
</html>

Output

A blue square box centered on the page rotated 45 degrees on the Y-axis with visible 3D depth. On hover, it smoothly rotates back to flat front view.

⚠️

Common Pitfalls

Many beginners forget that perspective must be set on the parent container, not the element being transformed. Without perspective on the container, 3D transforms look flat.

Also, forgetting transform-style: preserve-3d; on the child can flatten nested 3D elements.

css

/* Wrong: perspective on the element itself - no 3D depth effect */
.box {
  perspective: 500px;
  transform: rotateY(45deg);
}

/* Right: perspective on parent container */
.container {
  perspective: 500px;
}
.box {
  transform: rotateY(45deg);
  transform-style: preserve-3d;
}

📊

Quick Reference

Property	Description	Example Value
perspective	Distance from viewer to z=0 plane; controls 3D depth	500px
perspective-origin	Position of the vanishing point (x y)	50% 50%
transform-style	Defines if children preserve 3D or flatten	preserve-3d
transform	Applies 3D transforms like rotateY, translateZ	rotateY(45deg)

✅

Key Takeaways

Apply perspective on the container to create 3D depth for child elements.

Smaller perspective values create stronger 3D effects; larger values soften it.

Use transform-style: preserve-3d; on children to keep 3D transformations visible.

Without perspective on the parent, 3D transforms look flat and lose depth.

Adjust perspective-origin to change the vanishing point for creative effects.