CSS - perspective Property
The CSS property perspective specifies the distance between the z=0 plane and the user. It helps in providing some perspective to a 3D-positioned element.
The value of perspective property determines the effect's strength.
The transformation will be small with larger values of perspective and large transformations with smaller perspective values.
Each 3D element with z>0 will be larger and with z<0 will be smaller.
When the value of z-axis coordinates is greater than the value of perspective, the element can not be drawn on the three-dimensional space.
By default the vanishing point, i.e., the position at which viewer / user is looking, is center.
Vanishing point can be changed using the CSS property perspective-origin.
When a value is passed other than none to this property, it acts like a containing block for elements with position: fixed value.
Possible values
The CSS property perspective can have one of the following values:
1. none: No perspective transform is applied.
2. <length>: Specifies the distance from the user to the z=0 plane.
Applies a perspective transform to the children of the element.
Negative values are not permitted and considered as syntax error.
Value lesser than 1px is clamped to 1px.
Applies to
All transformable elements.
Syntax
perspective = none | <length>
CSS perspective - <length> Values
Following example demonstrates the use of CSS property perspective with various values of unit <length>.
<html> <head> <style> .container { width: 150px; height: 150px; margin: 75px 0 0 75px; border: none; } .cube { width: 50%; height: 50%; perspective-origin: 120% 120%; transform-style: preserve-3d; padding: 50px; } .face { position: absolute; width: 100px; height: 100px; border: 1px solid black; line-height: 80px; font-size: 3.5em; color: white; text-align: center; } .front { background: rgba(178, 0, 178, 0.5); transform: translateZ(50px); } .back { background: rgba(178, 178, 0, 0.5); color: black; transform: rotateY(180deg) translateZ(50px); } .right { background: rgba(0, 0, 178, 0.5); transform: rotateY(90deg) translateZ(50px); } .left { background: rgba(178, 0, 0, 0.5); transform: rotateY(-90deg) translateZ(50px); } .top { background: rgba(0, 200, 0); transform: rotateX(90deg) translateZ(50px); } .bottom { background: rgba(0, 0, 0, 0.2); transform: rotateX(-90deg) translateZ(50px); } .length-cm { perspective: 10cm; } .length-em { perspective: 15em; } .length-px { perspective: 200px; } .length-neg { perspective: -100px; } </style> </head> <body> <h1>perspective</h1> <div class="container"> <p>perspective: 10cm</p> <div class="cube length-cm"> <div class="face front"></div> <div class="face back"></div> <div class="face right"></div> <div class="face left"></div> <div class="face top"></div> <div class="face bottom"></div> </div> <p>perspective: 15em</p> <div class="cube length-em"> <div class="face front"></div> <div class="face back"></div> <div class="face right"></div> <div class="face left"></div> <div class="face top"></div> <div class="face bottom"></div> </div> <p>perspective: 200px</p> <div class="cube length-px"> <div class="face front"></div> <div class="face back"></div> <div class="face right"></div> <div class="face left"></div> <div class="face top"></div> <div class="face bottom"></div> </div> <p>perspective: -100px</p> <div class="cube length-neg"> <div class="face front"></div> <div class="face back"></div> <div class="face right"></div> <div class="face left"></div> <div class="face top"></div> <div class="face bottom"></div> </div> </div> </body> </html>
CSS perspective - none Value
Following example demonstrates the use of CSS property perspective with value as none.
<html> <head> <style> .container { width: 150px; height: 150px; border: none; } .cube { width: 50%; height: 50%; perspective: none; perspective-origin: 120% 120%; transform-style: preserve-3d; } .face { position: absolute; width: 100px; height: 100px; border: 1px solid black; line-height: 80px; font-size: 3.5em; color: white; text-align: center; } .front { background: rgba(178, 0, 178, 0.5); transform: translateZ(50px); } .back { background: rgba(178, 178, 0, 0.5); color: black; transform: rotateY(180deg) translateZ(50px); } .right { background: rgba(0, 0, 178, 0.5); transform: rotateY(90deg) translateZ(50px); } .left { background: rgba(178, 0, 0, 0.5); transform: rotateY(-90deg) translateZ(50px); } .top { background: rgba(0, 200, 0); transform: rotateX(90deg) translateZ(50px); } .bottom { background: rgba(0, 0, 0, 0.2); transform: rotateX(-90deg) translateZ(50px); } </style> </head> <body> <div class="container"> <p>perspective: none</p> <div class="cube"> <div class="face front"></div> <div class="face back"></div> <div class="face right"></div> <div class="face left"></div> <div class="face top"></div> <div class="face bottom"></div> </div> </div> </body> </html>
To Continue Learning Please Login
Login with Google