left center perspective
bottom center perspective
right center perspective
Revision:
It determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.
The property defines how far the object is away from the user: a lower value will result in a more intensive 3D effect than a higher value. The CHILD element(s) gets the perspective view, NOT the element itself.
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: large values of perspective cause a small transformation; small values of perspective cause a large transformation.
The parts of the 3D elements that are behind the user - i.e. their z-axis coordinates are greater than the value of the perspective CSS property - are not drawn.
The vanishing point is by default placed at the center of the element, but its position can be changed using the perspective-origin property. Using this property with a value other than none creates a new stacking context. Also, in that case, the object will act as a containing block for "position: fixed" elements that it contains.
Syntax: perspective: length|none;
property values:
length: how far the element is placed from the view; it gives the distance from the user to the z=0 plane; it is used to apply a perspective transform to the children of the element; negative values are syntax errors; if the value is smaller than 1px, it is clamped to 1px.
none: default value; same as 0; the perspective is not set; no perspective transform is to be applied.
initial: sets this property to its default value;
inherit: inherits this property from its parent element.
syntax examples:
/* Keyword value */
perspective: none;
/* <length> values */
perspective: 20px;
perspective: 3.5em;
/* Global values */
perspective: inherit;
perspective: initial;
perspective: revert;
perspective: revert-layer;
perspective: unset;
It defines at which position the user is looking at the 3D object. When defining this property for an element, it is the CHILD elements that will get the effect, NOT the element itself.
It is used as the vanishing point by the perspective property.
The "perspective-origin" and "perspective" properties are attached to the parent of a child transformed in 3-dimensional space, unlike the "perspective() transform function" which is placed on the element being transformed.
Syntax: perspective-origin: x-axis y-axis|initial|inherit;
property values:
x-axis: defining where the view is placed at the x-axis; possible values: left, center, right, length, %; default value: 50%.
y-axis: defining where the view is placed at the y-axis; possible values: top, center, bottom, length, %; default value: 50%.
initial: sets this property to its default value.
inherit: inherits this property from its parent element.
syntax examples
/* One-value syntax */
perspective-origin: x-position;
/* Two-value syntax */
perspective-origin: x-position y-position;
/* When both x-position and y-position are keywords,
the following is also valid */
perspective-origin: y-position x-position;
/* Global values */
perspective-origin: inherit;
perspective-origin: initial;
perspective-origin: revert;
perspective-origin: revert-layer;
perspective-origin: unset;
example: perspective: 100px or none
<div>
<h3>perspective: 100px:</h3>
<div id="div1">DIV1
<div id="div2">DIV2</div>
</div>
<h3>perspective: none:</h3>
<div id="div3">DIV3
<div id="div4">DIV4</div>
</div>
</div>
<style>
#div1 {position: relative; height: 15vw; width: 15vw; margin-left: 6vw; border: 0.5vw solid blue; perspective: 10vw;}
#div2, #div4 {padding: 5vw; position: absolute; border: 0.5vw solid black; background: rgba(100,100,100,0.5);
transform-style: preserve-3d; transform: rotateX(45deg);}
#div3 {position: relative; height: 15vw; width: 15vw; margin-left: 6vw; border: 0.5vw solid blue; perspective: none;}
</style>
example: perspective: 800px or 150px
<div>
<h3>perspective: 800px:</h3>
<div class="ex1">
<div class="cube">
<div class="side front">1</div>
<div class="side back">6</div>
<div class="side right">4</div>
<div class="side left">3</div>
<div class="side top">5</div>
<div class="side bottom">2</div>
</div>
</div>
<h3 style="margin-top:300px">perspective: 150px:</h3>
<div class="ex2">
<div class="cube">
<div class="side front">1</div>
<div class="side back">6</div>
<div class="side right">4</div>
<div class="side left">3</div>
<div class="side top">5</div>
<div class="side bottom">2</div>
</div>
</div>
</div>
<style>
.ex1 {perspective: 800px;}
.ex2 {perspective: 150px;}
.cube {font-size: 4em; width: 2em; margin: 1.5em auto; transform-style: preserve-3d; transform:
rotateX(-45deg) rotateY(30deg);}
.side {position: absolute;width: 2em;height: 2em; background: rgba(100,100,100,0.5); border: 1px solid red;
text-align: center; line-height: 2em; }
.front {transform: translateZ(1em);}
.top {transform: rotateX(90deg) translateZ(1em);}
.right {transform: rotateY(90deg) translateZ(1em);}
.left {transform: rotateY(-90deg) translateZ(1em);}
.bottom {transform: rotateX(-90deg) translateZ(1em);}
.back {transform: rotateY(-180deg) translateZ(1em);}
</style>
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.
examples
<div class="content">
<div class="box b1">
<span class="text">left center perspective</span>
</div>
<div class="box b2">
<span class="text">bottom center perspective</span>
</div>
<div class="box b3">
<span class="text">right center perspective</span>
</div>
</div>
<style>
.content {margin-top: 10%; margin-right: 20px; margin-left: 20px; text-align: center; background-color:aquamarine}
.box {height: 10vw; width: 10vw; background: #cf6767; border-radius: 1.2vw; display: inline-block; margin: 1vw 2vw 1vw 2vw;
transition: 0.4s ease-in;}
.b1 {transform-origin: left center;}
.b1:hover {transform: perspective(300px) rotatey(45deg); opacity: 0.8;}
.b2 {transform-origin: bottom center;}
.b2:hover {opacity: 0.8; transform: perspective(300px) rotatex(45deg);}
.b3 {transform-origin: right center;}
.b3:hover {opacity: 0.8;transform: perspective(300px) rotatey(-45deg);}
.text {color: darkgrey; text-align: center; font-size: 0.8vw; font-family: sans-serif;}
</style>
The first gives element depth, while the later creates a 3D-space shared by all its transformed children.
Setting perspective on the parent makes all children share the same 3D-space and thus the same vanishing point.
examples
code:
<div>
<div class="parent perspective">
<h3>Using "perspective property" on parent</h3>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div><!--
--><div class="parent transform">
<h3>Using "transform: perspective()"" on children</h3>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
<style>
.parent {width: 50%; display: inline-block; padding: .5em;}
.parent.perspective {perspective: 50em;}
.child {margin: .5em; width: 3em; height: 3em; background: tomato; display: inline-block; border: 1px solid rgba(0,0,0,.5);}
.parent.perspective .child {transform: rotateX(50deg); background: tomato;}
.parent.transform .child {transform: perspective(50em) rotateX(50deg); background: deepskyblue;}
h3 {font-size: 1em;}
</style>