CSS perspective Property
The perspective property defines how far the viewer is from the 3D scene, which determines the intensity of the 3D effect for child elements.
| none | The default value which results in no 3D perspective being applied to the children. |
| <length> | A positive distance representing how far the viewer is from the z=0 plane. |
Code Examples
A basic example showing a red box rotated 45 degrees on the Y-axis inside a parent with 500px of perspective.
<div style="perspective: 500px; border: 1px solid #cccccc; width: 200px; padding: 20px;">
<div style="width: 100px; height: 100px; background: #ff0000; transform: rotateY(45deg); margin: auto;"></div>
</div>An advanced example using a range slider and JavaScript to dynamically adjust the perspective distance of a 3D scene.
<div id="stage" style="perspective: 800px; height: 200px; display: flex; align-items: center; justify-content: center; background: #f0f0f0;">
<div id="card" style="width: 150px; height: 100px; background: #007bff; color: #ffffff; display: flex; align-items: center; justify-content: center; transform: rotateX(30deg); transition: transform 0.5s;">3D Card</div>
</div>
<input type="range" min="100" max="2000" value="800" oninput="adjust(this.value)">
<script>
function adjust(val) {
const stage = document.getElementById("stage");
stage.style.perspective = val + "px";
}
</script>Pro Tip
You can change where the viewer is looking from by using the perspective-origin property in conjunction with perspective. By default, you are looking at the center, but you can move the camera to the top-left or bottom-right to see different sides of your 3D objects without actually moving the objects themselves.
Deep Dive
Think of perspective as a camera lens. If you hold a square piece of paper right in front of your nose and tilt it, the distortion is heavy. If you move the paper across the room and tilt it, the distortion is barely noticeable. In CSS, the perspective value is that distance. You apply it to a parent container to establish a 3D space for its children. A smaller value like 200px creates an extreme, wide-angle distortion, while a larger value like 2000px creates a subtle, telephoto effect. It essentially sets the vanishing point for the children that have 3D transforms applied to them.
Best Practices
Always apply the perspective property to the parent container of the elements you want to transform. This ensures that all children share the same vanishing point, which makes the 3D scene look realistic and consistent. Stick to values between 500px and 1000px for most UI elements to avoid nauseating or unrealistic levels of distortion.
Common Pitfalls
A common mistake is applying perspective directly to the element you are rotating. If you do that, it won't work as expected because perspective is meant to be the 'stage' or 'environment' for children. If you need an individual element to have its own perspective, use the transform: perspective() function instead. Also, remember that this property only affects children that have 3D transforms like rotateX, rotateY, or translateZ.
Accessibility
Heavy 3D animations or rapidly changing perspective values can trigger motion sickness or vestibular disorders in some users. Use the prefers-reduced-motion media query to disable or simplify these effects for users who have requested less motion in their system settings.
Dev Data Table: perspective property
| default | none |
| animatable | yes |
| inherited | no |
| experimental | no |
| year_intro | 2009 |
| year_standard | 2012 |
| js_syntax_1 | object.style.perspective = "500px"; |
| js_syntax_2 | object.style.setProperty("perspective", "500px"); |
| js_note | When setting this property via JavaScript, the value must be a string containing both the number and the unit. |
| browsers | { "Chrome": 36, "Edge": 12, "Firefox": 16, "Safari": 9, "Opera": 23, "Chrome Android": 36, "Safari on iOS": 9, "Samsung Internet": 3, "Opera Mobile": 23 } |