Perspective Property
Last updated: 2026-09-13
perspective Perspective Property
The perspective property defines the strength of the perspective in 3D transforms — the distance from the viewer's eye to the z=0 plane. Smaller values produce a stronger effect (more exaggerated near-large-far-small), while larger values flatten the perspective. The property must be set on the parent of the element applying the 3D transform, and is the foundation of realistic 3D scenes.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
perspective: none | <length>;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | Keyword | No perspective |
<length> | Type | The perspective distance |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| perspective | ✓ v36 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v23 |
| Supported in all major browsers | |||||
Tip： perspective must be set on the parent element and affects all of its children that apply 3D transforms. Values between 500px and 1500px usually look natural.
Important： none means no perspective (equivalent to infinite distance), so 3D transforms render as an orthographic projection with no sense of depth.
❓ FAQ
QHow are the perspective and perspective-origin properties related?
Aperspective defines the distance from the viewer to the z=0 plane and therefore the strength of the perspective (how exaggerated near-large-far-small is). perspective-origin defines where the viewer's line of sight lands on the container, deciding from which angle the scene is seen. Both are necessary parameters for 3D viewing, are set on the same parent container, and together determine how children's 3D transforms appear.
QWhy is there no sense of depth even though I set rotateY on an element?
AUsually the parent is missing a perspective, so the rotation renders flat. Or the parent has overflow: hidden, an opacity below 1, or a filter, each of which forces a flat context and crushes the 3D. Alternatively, apply the perspective directly on the element with transform: perspective(800px) rotateY(45deg).
QWhat is a good perspective value to use for 3D CSS transforms?
AThe value is the distance from the viewer to the element: smaller values give stronger perspective and more exaggerated distortion, while larger values approach an orthographic projection. For typical page effects, 500px to 1500px looks natural, with 800px to 1000px a common choice; 200px to 400px gives an exaggerated fisheye look. Adjust it proportionally to the element size so the edges do not move too much during rotation.
QWhat is the difference between the perspective property and the transform: perspective() function?
AThe perspective property is set on the parent and gives all 3D children the same single viewpoint, so several children share one perspective. The perspective() function is written in a specific element's own transform, applies only to that element, and its effect depends on its position in the function list. The parent property matches real scenes better; the function form suits giving one element its own perspective.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
