The perspective() CSS function defines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.
Syntax
perspective(d)
Values
- d
- Is a
<length>giving the distance from the user to the z=0 plane. It is used to apply a perspective transform to the element. If it is 0 or a negative value, no perspective transform is applied.
| Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
|---|---|---|---|
|
This transform applies to the 3D space and cannot be represented on the plan. |
A perspective is not a linear transform in ℝ3 and cannot be represented using a matrix in the Cartesian coordinates system. | ||
Examples
Applying perspective on a 3D object
HTML
<p>Without Perspective:</p> <div class="no-perspective-box"> <div class="face front">A</div> <div class="face top">B</div> <div class="face left">C</div> </div> <p>With Perspective (7.5cm):</p> <div class="perspective-box"> <div class="face front">A</div> <div class="face top">B</div> <div class="face left">C</div> </div>
CSS
.face{
position: absolute;
width: 100px;
height: 100px;
line-height: 100px;
font-size: 100px;
text-align: center;
}
.no-perspective-box{
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform: rotateX(-15deg) rotateY(15deg);
margin-left: 100px;
}
.perspective-box{
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform: perspective(7.5cm) rotateX(-15deg) rotateY(15deg);
margin-left: 100px;
}
.top{
background-color: blue;
transform: rotateX(90deg) translate3d(0, 0, 50px);
}
.left{
background-color: red;
transform: rotateY(-90deg) translate3d(0, 0, 50px);
}
.front{
background-color: green;
transform: translate3d(0, 0, 50px);
}