Transform
perspective-origin
perspective-origin sets the point of the element that you look at straight on (the vanishing point) when perspective adds depth.
Syntax
<position>Preview
Code
.box {
perspective: 300px;
perspective-origin: right top;
}
.box > :nth-child(2) {
transform: rotateY(50deg);
}Controls
Click or drag inside the box to move the center
About
Values
Write a horizontal and vertical position, the same way as background-position. The initial value is 50% 50% (the middle), and percentages refer to the element's width and height. With left your eye is in front of the element's left edge, and with right bottom in front of its bottom right corner.
Things to watch
- Nothing changes unless the same element has a
perspectiveother thannone. - It goes on the parent (the element with
perspective). The center of the rotated child is set on the child withtransform-origin.
In the preview, supporting declarations give the box depth (perspective: 300px) and turn the card (the second child) 50 degrees on the vertical axis. The card turns to face right, so moving the eye to the right shows it from nearly straight on and it looks bigger; moving it to the left shows it at an angle and it looks thinner.