What does transform: perspective() do?
transform: perspective() is a function that applies perspective distortion for 3D transforms, creating a sense of depth: farther objects look smaller, closer ones look bigger.
Important: when perspective() is used inside transform, it applies only to that element, not to any children.
Example:
css
.box {
transform: perspective(600px) rotateY(45deg);
}Where 600px is the distance from the "camera" to the object (the smaller the value, the stronger the perspective).
The difference from perspective as a standalone property
css
.container {
perspective: 600px; /* affects all 3D transforms inside the container */
}perspective(standalone property): sets the perspective for all childrenperspective()intransform: only for that specific element
Summary
transform: perspective(X) creates a 3D depth effect for an element, affecting how rotations and other 3D transforms are perceived.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.