perspective()
CSS
function
defines a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were 3-dimensional. Its result is a
<transform-function>
data type.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
perspective()
transform function is part of the
transform
value applied on the element being transformed. This differs from the
perspective
and
perspective-origin
properties which are attached to the parent of a child transformed in 3-dimensional space.
The perspective distance used by
perspective()
is specified by a
<length>
value, which represents the distance between the user and the z=0 plane. The z=0 plane is the plane where everything appears in a 2-dimensional view, or the screen. A positive value makes the element appear closer to the user than the rest of the interface, a negative value farther. The greater the value, the further away the perspective of the user is.
perspective(d)
<length>
representing the distance from the user to the z=0 plane. 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 transformation applies to the 3D space and can't be represented on the plane. |
This transformation is not a linear transformation in ℝ 3 , and can't be represented using a Cartesian-coordinate matrix. | ||
<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 (9cm):</p> <div class="perspective-box-far"> <div class="face front">A</div> <div class="face top">B</div> <div class="face left">C</div> </div> <p>With perspective (4cm):</p> <div class="perspective-box-closer"> <div class="face front">A</div> <div class="face top">B</div> <div class="face left">C</div> </div>
.face {
position: absolute;
width: 100px;
height: 100px;
line-height: 100px;
font-size: 100px;
text-align: center;
}
p + div {
width: 100px;
height: 100px;
transform-style: preserve-3d;
margin-left: 100px;
}
.no-perspective-box {
transform: rotateX(-15deg) rotateY(30deg);
}
.perspective-box-far {
transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
}
.perspective-box-closer {
transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
}
.top {
background-color: skyblue;
transform: rotateX(90deg) translate3d(0, 0, 50px);
}
.left {
background-color: pink;
transform: rotateY(-90deg) translate3d(0, 0, 50px);
}
.front {
background-color: limegreen;
transform: translate3d(0, 0, 50px);
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Transforms Level 2
The definition of 'perspective()' in that specification. |
编者草案 | 初始定义 |
Please see the
<transform-function>
data type for compatibility info.