CSS perspective property
The perspective property in CSS is used to give a 3D effect to elements by applying a perspective transformation to their child elements. It defines how far the element is placed from the view, allowing you to create a sense of depth on a 2D plane. The perspective property is crucial when you want to apply 3D transformations like rotateX, rotateY, or translateZ to elements, making them appear as if they are rotating or moving in three-dimensional space.
Syntax
.element {
perspective: value;
}
value: This is the distance from the viewer to the plane on which the element is rendered, measured in pixels. A smaller value makes the 3D effect more pronounced, while a larger value flattens the effect. The typical range is from around 100px to 1000px.
How It Works
- The
perspectiveproperty is applied to a parent element, and it affects the 3D transformation of its child elements. - It controls the amount of perspective, or depth, that the children will have when they are transformed.
Example
.container {
perspective: 500px;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
transform: rotateY(45deg);
transition: transform 0.5s ease;
}
<div class="container">
<div class="box"></div>
</div>
- Explanation:
- The
.containerdiv has aperspectiveof 500px, meaning it creates a 3D environment where the.boxis rendered. - The
.boxelement is rotated 45 degrees along the Y-axis, creating a 3D effect where it appears as if it is tilted or turned sideways.
- The
Perspective Effect
Shorter Distance (e.g., 200px):
- A smaller value creates a stronger perspective effect, making the object appear more distorted as it recedes or comes closer.
.container { perspective: 200px; }Larger Distance (e.g., 1000px):
- A larger value makes the perspective effect more subtle, causing the object to appear less distorted and more like a typical 2D transformation.
.container { perspective: 1000px; }
Perspective Origin
You can also control the point from which the perspective originates using the perspective-origin property. This defines the vanishing point of the 3D space and affects how the perspective is viewed.
Syntax:
perspective-origin: x-axis y-axis;x-axis: Can be values likeleft,right,center, or a specific length (e.g.,100px).y-axis: Can be values liketop,bottom,center, or a specific length.Example:
.container { perspective: 500px; perspective-origin: left top; }- This shifts the vanishing point to the top-left corner of the element, affecting how the 3D transformation is perceived.
Difference Between perspective and transform: perspective()
perspectiveProperty:- Applied to a parent element and affects all child elements' 3D transformations.
transform: perspective()Function:Applied directly to an element as part of the
transformproperty, creating a local perspective for that element only.Example:
.box { transform: perspective(500px) rotateY(45deg); }- Here, the
perspectiveis applied directly to the.box, affecting only this element's 3D transformation.
- Here, the
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 Example</title>
<style>
.container {
perspective: 500px;
width: 200px;
height: 200px;
margin: 100px auto;
}
.box {
width: 100%;
height: 100%;
background-color: lightblue;
transform: rotateX(45deg);
transition: transform 0.5s ease;
}
.container:hover .box {
transform: rotateX(-45deg);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
- Explanation:
- The
.containerhas aperspectiveof 500px, creating a 3D space. - The
.boxis rotated 45 degrees along the X-axis. - On hover, the
.boxrotates to the opposite direction, creating a flipping effect with perspective.
- The