The perspective-origin
property in CSS is used to control the origin of the perspective effect applied to an element’s child elements. Essentially, it defines the vanishing point for the 3D perspective, which is the point at which elements appear to converge in the 3D space.
The perspective-origin
property allows you to adjust the position of this vanishing point, thereby influencing how the 3D effect is perceived. By default, this point is at the center of the element, but you can move it horizontally or vertically.
Syntax
.element {
perspective-origin: x-axis y-axis;
}
x-axis
: Defines the horizontal position of the perspective origin. Can be a length (e.g.,100px
), a percentage, or a keyword (left
,center
,right
).y-axis
: Defines the vertical position of the perspective origin. Can be a length (e.g.,50px
), a percentage, or a keyword (top
,center
,bottom
).
Default Value
- The default value is
perspective-origin: 50% 50%;
, which places the perspective origin at the center of the element.
Example
.container {
perspective: 500px;
perspective-origin: left top;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
transform: rotateY(45deg);
}
In this example:
- The
.container
has aperspective
of 500px, meaning it is set up to create a 3D space. - The
perspective-origin
is set toleft top
, so the vanishing point is at the top-left corner of the container. - The
.box
inside the container is rotated 45 degrees along the Y-axis, and the rotation will appear as if the top-left corner is the closest point to the viewer.
Visual Impact of perspective-origin
Horizontal Axis:
left
or0%
: The vanishing point is at the left edge of the element.center
or50%
: The vanishing point is at the center (default).right
or100%
: The vanishing point is at the right edge.
Vertical Axis:
top
or0%
: The vanishing point is at the top edge of the element.center
or50%
: The vanishing point is at the center (default).bottom
or100%
: The vanishing point is at the bottom edge.
Practical Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Perspective Origin Example</title>
<style>
.container {
perspective: 400px;
width: 200px;
height: 200px;
margin: 100px auto;
background-color: lightgray;
}
.box {
width: 100%;
height: 100%;
background-color: lightblue;
transform: rotateX(30deg);
transition: transform 0.5s ease;
}
.container-left-top {
perspective-origin: left top;
}
.container-right-bottom {
perspective-origin: right bottom;
}
.container:hover .box {
transform: rotateX(-30deg);
}
</style>
</head>
<body>
<div class="container container-left-top">
<div class="box"></div>
</div>
<div class="container container-right-bottom">
<div class="box"></div>
</div>
</body>
</html>
Explanation
First Container (
container-left-top
):- The perspective origin is set to
left top
. The vanishing point is at the top-left corner, making the 3D transformation of.box
appear as if it is tilting away from that corner.
- The perspective origin is set to
Second Container (
container-right-bottom
):- The perspective origin is set to
right bottom
. The vanishing point is at the bottom-right corner, so the.box
appears to tilt away from that corner.
- The perspective origin is set to
Important Notes
- The
perspective-origin
property affects the positioning of the 3D effect, not the position of the element itself. It changes how the viewer perceives the 3D transformations applied to the element's children. - The
perspective-origin
works in conjunction with theperspective
property. Withoutperspective
, theperspective-origin
has no effect.