perspective()
Quick Summary for 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.
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

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Nothing, to my way of thinking, is a better proof of a well ordered mind than a man's ability to stop just where he is and pass some time in his own company.
Seneca
Random CSS Property

<integer>

The <integer> CSS data type is a special type of <number> that represents a whole number, whether positive or negative. Integers can be used in numerous CSS properties, such as column-count, counter-increment, grid-column, grid-row, and z-index.
<integer> css reference