Transform
perspective
perspective sets how far away you are looking from when child elements are rotated or moved in 3D, giving them depth. The smaller the value, the closer you are: near parts look bigger and far parts smaller.
Syntax
none | <length [0,∞]>Preview
Presets
Drag the bottom-right corner to resize
Code
.box {
perspective: 300px;
}
.box > :nth-child(2) {
transform: rotateY(50deg);
}Controls
perspective300px
About
Values
none: the initial value. No depth is added; a child rotated on the vertical axis just looks narrower.- Length: the distance from the eye to the element's plane (depth 0). Small values like
100pxdistort strongly; large values like1000pxlook almost flat. Negative values are not allowed, and values below 1px are drawn as 1px.
Things to watch
- It affects the 3D transforms of the element's children (and of descendants still drawn in 3D), not the element's own
transform. To give a single element depth, put theperspective()function first, as intransform: perspective(300px) rotateY(50deg). - Where you look from (the vanishing point) is set by
perspective-origin. It defaults to the middle of the element. - Any value other than
nonecreates a new stacking context and, liketransform, makesposition: fixedchildren position themselves against this element.
The preview stacks a dashed frame (the first child) and a card (the second child) in the box, and a supporting declaration turns the card 50 degrees on the vertical axis (transform: rotateY(50deg)).