left center perspective
bottom center perspective
right center perspective
Revision:
The property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.
The perspective 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. When defining the perspective property for an element, it is the CHILD elements that get 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.
The perspective-origin property defines at which position the user is looking at the 3D object. When defining the perspective-origin property for an element, it is the CHILD elements that will get the effect, NOT the element itself.
Perspective property - 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 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.
Perspective-origin - 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;
<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>
<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.
<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.
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>