CSS `perspective`: Creating 3D Depth
The CSS perspective property sets a 'camera' distance for 3D-transformed children, creating a sense of depth. Use it on a container to make elements appear to recede into the screen. The main footgun: a smaller value creates a *more* dramatic effect.
Why it exists
Without perspective, a 3D transform like rotateY(45deg) just looks like a 2D element being squished horizontally. The perspective property provides the missing depth information, telling the browser how to scale elements based on their Z-axis position to simulate a true 3D space.
The mental model
Think of the perspective value as the distance from your eye to the computer screen. If you press your face right up to the screen (a small perspective value), objects will look distorted and the scene will have extreme depth. If you stand far back (a large perspective value), the scene will look flatter and less distorted.
How it works
You apply perspective to a parent container element. This establishes a 3D rendering context for all its children. Any child with a 3D transform (like translateZ or rotateY) will then be rendered with this perspective. Elements with a positive translateZ (closer to the viewer) appear larger, while those with a negative translateZ (further away) appear smaller. The strength of this effect is inversely proportional to the value: small values cause a large transformation, and large values cause a small one. The vanishing point, where parallel lines appear to converge, defaults to the center of the container but can be adjusted with perspective-origin.
When to use it
Use perspective on a container when you want to create a shared 3D scene for multiple elements. This is essential for effects like a gallery of flipping cards, a rotating 3D cube, or any animation where multiple elements should appear to exist in the same 3D space with a consistent vanishing point.
When not to use it
Do not apply perspective to the element you are transforming if you want it to have its own, independent perspective. For that, use the perspective() function within the transform property itself (e.g., transform: perspective(800px) rotateY(45deg);). Also, avoid it if you only need 2D transforms, as it creates a new stacking context which can have performance and layout side effects.
One canonical example
To make a div flip like a playing card, you wrap it in a container. The container gets the perspective property, for example perspective: 1000px;. The inner div gets transform-style: preserve-3d; and is rotated on hover with transform: rotateY(180deg);. Without the parent's perspective, the flip would just look like the element is squishing and then expanding again, lacking any 3D depth.
Interview question
How does the numerical value of the CSS perspective property influence the perceived depth of 3D transformed elements?
- a.A larger value increases the perceived depth and distortion.
- b.The value primarily shifts the vanishing point, not the degree of depth.
- c.A smaller value results in a more dramatic and distorted 3D appearance.Correct
- d.A smaller value makes the 3D effect appear less dramatic and more subtle.
Why? this is the answer
The card explicitly states that "a smaller value creates a more dramatic effect" and "small values cause a large transformation," akin to pressing your face close to a screen. Option A is a common misconception, as a larger perspective value simulates a greater distance from the viewer, resulting in a flatter, less distorted 3D scene.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #3d transforms
- #ui
- #animation
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles