Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS perspective-origin property
The CSS perspective-origin property defines the position from which the viewer is looking at 3D-positioned elements. It determines the vanishing point for the perspective effect, controlling how 3D transformations appear to the viewer.
Syntax
selector {
perspective-origin: x-position y-position;
}
Possible Values
| Value | Description |
|---|---|
x-position |
Horizontal position: left, center, right, or percentage/length values |
y-position |
Vertical position: top, center, bottom, or percentage/length values |
initial |
Sets to default value (50% 50%) |
inherit |
Inherits from parent element |
Example: Left Origin Perspective
The following example demonstrates how perspective-origin: left affects the viewing angle of a 3D rotated element −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 200px;
height: 200px;
background-color: #f0f0f0;
perspective: 200px;
perspective-origin: left;
margin: 50px;
border: 2px solid #333;
}
.rotated-box {
position: absolute;
width: 100px;
height: 100px;
background-color: #4CAF50;
transform: rotateX(45deg);
top: 50px;
left: 50px;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
</style>
</head>
<body>
<h3>Perspective Origin: Left</h3>
<div class="container">
<div class="rotated-box">3D Box</div>
</div>
</body>
</html>
A green 3D box rotated 45 degrees along the X-axis appears inside a gray container. The perspective origin from the left creates a viewing angle as if looking from the left side, making the box appear to tilt away from the left edge.
Example: Comparing Different Origins
This example shows the difference between left, center, and right perspective origins −
<!DOCTYPE html>
<html>
<head>
<style>
.demo-container {
display: flex;
gap: 20px;
margin: 20px;
}
.perspective-box {
width: 150px;
height: 150px;
background-color: #e0e0e0;
perspective: 150px;
border: 1px solid #666;
position: relative;
}
.box-left { perspective-origin: left; }
.box-center { perspective-origin: center; }
.box-right { perspective-origin: right; }
.inner-box {
width: 80px;
height: 80px;
background-color: #FF6B6B;
transform: rotateY(45deg);
position: absolute;
top: 35px;
left: 35px;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
</style>
</head>
<body>
<div class="demo-container">
<div>
<p>Left Origin</p>
<div class="perspective-box box-left">
<div class="inner-box">Box</div>
</div>
</div>
<div>
<p>Center Origin</p>
<div class="perspective-box box-center">
<div class="inner-box">Box</div>
</div>
</div>
<div>
<p>Right Origin</p>
<div class="perspective-box box-right">
<div class="inner-box">Box</div>
</div>
</div>
</div>
</body>
</html>
Three red boxes rotated 45 degrees along the Y-axis are displayed side by side. Each box appears different based on the perspective origin: the left origin shows the box as viewed from the left, center shows a symmetric view, and right origin shows the box as viewed from the right side.
Conclusion
The perspective-origin property controls the viewing angle for 3D transformations. By changing the origin point, you can create different visual effects and control how 3D elements appear to tilt or rotate in space.
Updated on: 2026-03-15T12:35:59+05:30
100 Views
Advertisements