CSS perspective() Function

CSS perspective() Function

The CSS perspective() function adds a sense of depth to an element's 3D transformation by defining the distance between the viewer and the z=0 plane.

It is used within the transform property alongside functions such as rotateX(), rotateY(), and translateZ(). Smaller positive distances produce stronger perspective effects, while larger distances create a flatter appearance.

Syntax

transform: perspective(length);

The function accepts one length value representing the perspective distance.

For example:

transform: perspective(500px);
transform: perspective(800px) rotateY(30deg);
transform: perspective(600px) rotateX(25deg);
transform: perspective(1000px) translateZ(100px);

The function is usually combined with another 3D transform because perspective() alone does not produce a visible change to a flat element positioned at z=0.

It returns a CSS transform function value and is used as part of a transform list.

Parameters

The perspective() function accepts a single required parameter.

For example:

transform: perspective(400px) rotateY(35deg);

Common units include px, rem, and em.

The following values are invalid:

transform: perspective(-200px);
transform: perspective(50%);
transform: perspective(500);

Negative distances, percentages, and nonzero unitless numbers are not accepted.

For practical designs, use a positive length such as 500px or 800px.

How It Works

Perspective creates the visual impression that objects farther from the viewer appear smaller, while objects closer to the viewer appear larger.

In CSS 3D transforms, the z-axis represents depth:

• The x-axis runs horizontally.
• The y-axis runs vertically.
• The z-axis extends toward and away from the viewer.

For example:

.box {
  transform: perspective(600px) rotateY(40deg);
}

The rotateY() function turns the element around its vertical axis.

The perspective() function makes the nearer and farther portions of the rotated element appear at different sizes.

Without perspective, a 3D rotation can look flatter because there is no perspective-based size difference between near and far points.

The perspective effect is a visual transformation. It does not change the element's original layout dimensions.

Perspective Distance

The distance supplied to perspective() determines the strength of the depth effect.

For example:

.strong {
  transform: perspective(250px) rotateY(35deg);
}
.moderate {
  transform: perspective(600px) rotateY(35deg);
}
.subtle {
  transform: perspective(1200px) rotateY(35deg);
}

All three elements rotate by the same angle, but their perspective distances produce different visual results.

Smaller distances are not always better. Excessively strong perspective can distort an element or make parts of it difficult to read.

Transform Order

The order of functions in a transform declaration matters.

Transform functions are combined into a transformation matrix in their written order. With the usual CSS matrix convention, the rightmost function acts on points first.

For example:

.box-a {
  transform: perspective(600px) rotateY(35deg);
}
.box-b {
  transform: rotateY(35deg) perspective(600px);
}

These declarations are not generally equivalent.

For a typical 3D rotation effect, place perspective() before the rotation function:

.card {
  transform: perspective(700px) rotateY(25deg);
}

This applies perspective projection to the rotated element.

Additional functions, such as translateX(), translateZ(), and scale(), can further change the result.

3D Rotation

The perspective() function is commonly combined with 3D rotation functions.

For example, horizontal-axis rotation:

.tilt-x {
  transform: perspective(600px) rotateX(35deg);
}

Vertical-axis rotation:

.tilt-y {
  transform: perspective(600px) rotateY(35deg);
}

Rotation around a custom 3D axis:

.tilt-custom {
  transform: perspective(600px) rotate3d(1, 1, 0, 35deg);
}

The rotation determines the element's orientation, while perspective determines how its depth is projected onto the screen.

A rotation around the z-axis alone does not create the same visible depth effect because it rotates the element within its original plane.

Using translateZ()

The translateZ() function moves an element along the z-axis.

Positive values move it toward the viewer, while negative values move it away.

For example:

.closer {
  transform: perspective(600px) translateZ(100px);
}
.farther {
  transform: perspective(600px) translateZ(-100px);
}

With perspective applied, the closer element appears larger and the farther element appears smaller.

The distance between the viewer and the projected element affects the amount of scaling.

Moving an element too close to or beyond the viewer's projection plane can cause extreme distortion or make it disappear.

Use moderate z-axis translations for predictable results.

Function vs. Property

CSS provides both the perspective() transform function and the perspective property.

They are related but are applied differently.

Using the function:

.card {
  transform: perspective(600px) rotateY(30deg);
}

Using the property:

.scene {
  perspective: 600px;
}
.scene .card {
  transform: rotateY(30deg);
}

The second approach is useful when several elements should appear within the same 3D scene.

The perspective-origin property controls the viewpoint for the perspective property, not for an individual perspective() function.

Transform Origin

The transform-origin property controls the point around which an element is transformed.

By default, an element rotates around its center.

For example:

.card {
  transform-origin: center center;
  transform: perspective(700px) rotateY(30deg);
}

Changing the origin produces a different rotation effect:

.door {
  transform-origin: left center;
  transform: perspective(700px) rotateY(-45deg);
}

This makes the element rotate around its left edge, creating a door-like appearance.

The transform-origin property can also accept a third value for the z-axis.

For example:

.card {
  transform-origin: center center 40px;
  transform: perspective(700px) rotateY(30deg);
}

The third value shifts the transformation origin along the z-axis.

For interactive effects, adjusting the origin can be as important as choosing the perspective distance.

Example

This example compares the appearance of the same 3D rotation at three different perspective distances.

HTML:

<div class="perspective-demo">
  <div class="perspective-demo-item">
    <div class="perspective-demo-box perspective-strong">250px</div>
    <p>Strong Perspective</p>
  </div>
  <div class="perspective-demo-item">
    <div class="perspective-demo-box perspective-medium">600px</div>
    <p>Moderate Perspective</p>
  </div>
  <div class="perspective-demo-item">
    <div class="perspective-demo-box perspective-subtle">1200px</div>
    <p>Subtle Perspective</p>
  </div>
</div>

CSS:

.perspective-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding: 25px 10px;
}
.perspective-demo-item {
  width: 180px;
  text-align: center;
}
.perspective-demo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 120px;
  margin: 0 auto;
  background-color: #0066cc;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  border: 2px solid #004488;
}
.perspective-demo-item p {
  margin: 15px 0 0;
}
.perspective-strong {
  transform: perspective(250px) rotateY(45deg);
}
.perspective-medium {
  transform: perspective(600px) rotateY(45deg);
}
.perspective-subtle {
  transform: perspective(1200px) rotateY(45deg);
}

Each box rotates 45 degrees around the y-axis.

The first box has the strongest perspective distortion, while the third appears closer to a flat projection.

Hover Example

This example creates an interactive card that tilts in 3D when the pointer moves over it.

HTML:

<div class="perspective-hover-card">
  <h3>3D Card</h3>
  <p>Hover to see the perspective effect.</p>
</div>

CSS:

.perspective-hover-card {
  width: 100%;
  max-width: 300px;
  min-height: 180px;
  margin: 20px auto;
  padding: 30px 20px;
  background-color: #0066cc;
  color: #ffffff;
  text-align: center;
  border: 2px solid #004488;
  transform: perspective(700px) rotateY(0deg);
  transition: transform 0.5s ease;
}
.perspective-hover-card h3 {
  color: #ffffff;
}
.perspective-hover-card:hover {
  transform: perspective(700px) rotateY(25deg);
}
@media (prefers-reduced-motion: reduce) {
  .perspective-hover-card {
    transition: none;
  }
}

The card begins without rotation and tilts 25 degrees around the y-axis on hover.

The transition property creates a smooth change between the two transform values.

For users who request reduced motion, the transition is disabled.

Hover effects should not be the only way to reveal important information because touch devices may not provide a conventional hover interaction.

Common Uses

The perspective() function is commonly used to add depth to CSS 3D transformations.

For example:

.tilted-card {
  transform: perspective(800px) rotateY(20deg);
}
.flip-panel {
  transform: perspective(700px) rotateX(180deg);
}
.depth-effect {
  transform: perspective(900px) translateZ(80px);
}

These effects can be combined with transitions and animations to create interactive 3D interfaces.

Limitations

The perspective() function has several important rules and limitations.

• It accepts one non-negative CSS length value.
• Percentages and negative distances are invalid.
• A zero distance is valid but is clamped to a small positive distance for rendering.
• It does not create visible depth on an untransformed flat element at z=0.
• The order of transform functions affects the result.
• Very small distances can produce extreme distortion.
• It does not change the element's original layout dimensions.
• It is different from the perspective property applied to a parent element.
• It does not automatically establish a shared 3D perspective for sibling elements.
• Complex 3D animations may require additional properties such as transform-style and backface-visibility.

For example, this is valid:

transform: perspective(600px) rotateY(30deg);

The following is invalid because the perspective distance is negative:

transform: perspective(-600px) rotateY(30deg);

The following is invalid because the function does not accept percentages:

transform: perspective(50%) rotateY(30deg);

For most interface effects, a moderate positive distance provides a more controlled result.

Browser Support

The CSS perspective() function is Baseline Widely available and is supported by modern versions of Chrome, Edge, Firefox, Safari, and other major browsers.

It is part of the CSS Transforms specification and can be used with the transform property.

For example:

.card {
  transform: perspective(700px) rotateY(25deg);
}

Modern browsers support this declaration without vendor prefixes.

For current compatibility information, visit Can I Use? and search for CSS 3D Transforms.

Specifications

The perspective() function is defined in the CSS Transforms Module Level 2 .

The specification defines 3D transform functions, perspective projection, transform matrices, and related rendering behavior.

Related CSS features include transform, perspective, perspective-origin, transform-origin, transform-style, rotateX(), rotateY(), rotate3d(), and translateZ().