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
Usage of CSS perspective property
The CSS perspective property defines the distance between the user and the z-axis of an element, creating a 3D perspective effect. It controls how 3D transformed elements appear by setting the viewing distance for the transformation.
Syntax
selector {
perspective: value;
}
Possible Values
| Value | Description |
|---|---|
length |
Distance in px, em, rem, etc. Lower values create more dramatic perspective |
none |
No perspective applied (default) |
Example: Comparing Different Perspective Values
The following example demonstrates how different perspective values affect 3D rotated elements −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 30px;
margin: 50px;
}
.demo1 {
position: relative;
width: 150px;
height: 150px;
background-color: #f0f0f0;
border: 2px solid #333;
perspective: 100px;
}
.demo2 {
position: relative;
width: 150px;
height: 150px;
background-color: #f0f0f0;
border: 2px solid #333;
perspective: 300px;
}
.box {
position: absolute;
width: 100%;
height: 100%;
background-color: orange;
transform-style: preserve-3d;
transform: rotateX(45deg);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="demo1">
<div class="box">100px</div>
</div>
<div class="demo2">
<div class="box">300px</div>
</div>
</div>
</body>
</html>
Two orange boxes appear side by side, both rotated 45 degrees on the X-axis. The first box (100px perspective) shows a more dramatic 3D effect with stronger foreshortening, while the second box (300px perspective) appears less dramatically transformed with a more subtle 3D effect.
Key Points
- Lower perspective values (50px-200px) create dramatic, "close-up" 3D effects
- Higher values (500px-1000px) create subtle, "distant" 3D effects
- The perspective property is applied to the parent container, not the transformed element itself
- Must be used with transform properties like
rotateX(),rotateY(), orrotateZ()
Conclusion
The perspective property is essential for creating realistic 3D transformations in CSS. Experiment with different values to achieve the desired depth effect for your 3D elements.
Updated on: 2026-03-15T12:35:37+05:30
121 Views
Advertisements