perspective()
Quick Summary for perspective()
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.
Code Usage for perspective()
perspective(d)
More Details for perspective()
perspective()
The 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 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.
Syntax
The perspective distance used by perspective()
is specified by a <length>
value, which represents the distance between the user and the z=0 plane, or by none
. The z=0 plane is the plane where everything appears in a 2-dimensional view, or the screen. Negative values are syntax errors. Values smaller than 1px
(including zero) are clamped to 1px
. Values other than none
cause elements with positive z positions to appear larger, and elements with negative z positions to appear smaller. Elements with z positions equal to or larger than the perspective value disappear as though they are behind the user. Large values of perspective represent a small transformation; small values of perspective()
represent a large transformation; perspective(none)
represents perspective from infinite distance and no transformation.
perspective(d)
Values
d Is a <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. | ( 1 0 0 0 0 1 0 0 0 0 1 0 0 0 − 1 / d 1 ) |
Examples
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 (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>
CSS
.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); }
Result
Specifications
Specification |
---|
CSS Transforms Module Level 2 # funcdef-perspective |
See also
transform
<transform-function>
Select your preferred language English (US)Français日本語Português (do Brasil)中文 (简体) Change language