CSS - perspective-origin Property
The CSS property perspective-origin specifies the position at which viewer / user is looking. This position is used as the vanishing point by the CSS property perspective.
The properties perspective-origin and perspective are linked to the parent of a child transformed in the three-dimensional space; whereas the transform function perspective() is linked to the element that is being transformed.
Possible values
The CSS property perspective-origin can have one of the following values:
1. x-position: Specifies the position of the abscissa (x-axis) of the vanishing point. It can have one of the given values:
<length-percentage>: Specifies the position as an absolute length value or relative to the element's width. Value may be negative.
left: keyword for length value 0.
center: keyword for length value 50% percentage value.
right: keyword for length value 100% percentage value.
2. y-position: Specifies the position of the ordinate (y-axis) of the vanishing point. It can have one of the given values:
<length-percentage>: Specifies the position as an absolute length value or relative to the element's width. Value may be negative.
top: keyword for length value 0.
center: keyword for length value 50% percentage value.
bottom: keyword for length value 100% percentage value.
Applies to
All transformable elements.
Syntax
Following are the different ways in which perspective-origin property can be specified:
/* One-value syntax */ perspective-origin = x-position; /* Two-value syntax */ perspective-origin = x-position y-position; /* x-position and y-position values are keywords, following syntax is 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;
CSS perspective-origin - x-position (Keyword)
Following example demonstrates the use of CSS property perspective-origin with One-value syntax (Keyword value).
<html> <head> <style> .container { width: 150px; height: 150px; border: none; display: block; } .cube { width: 30%; height: 30%; perspective: 350px; transform-style: preserve-3d; margin-bottom: 80px; padding: 10px; } .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(100, 0, 100, 0.2); 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); } .po-left { perspective-origin: left; } .po-right { perspective-origin: right; } .po-center { perspective-origin: center; } </style> </head> <body> <h1>perspective-origin - x-position</h1> <div class="container"> <p>perspective-origin: left</p> <div class="cube po-left"> <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-origin: center</p> <div class="cube po-center"> <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-origin: right</p> <div class="cube po-right"> <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-origin - x-position (length)
Following example demonstrates the use of CSS property perspective-origin with One-value syntax (length value), both positive and negative values.
<html> <head> <style> .container { width: 150px; height: 150px; border: none; display: block; } .cube { width: 30%; height: 30%; perspective: 350px; transform-style: preserve-3d; margin-bottom: 80px; padding: 20px; } .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(100, 0, 100, 0.2); 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); } .po-length-cm { perspective-origin: 10cm; } .po-length-em { perspective-origin: 20em; } .po-length-px { perspective-origin: 200px; } .po-length-neg { perspective-origin: -200px; } </style> </head> <body> <center> <h1>perspective-origin - x-position</h1> <div class="container"> <p>perspective-origin: 10cm</p> <div class="cube po-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-origin: 20em</p> <div class="cube po-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-origin: 200px</p> <div class="cube po-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-origin: -200px</p> <div class="cube po-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> </center> </body> </html>
CSS perspective-origin - x-position (Percentage)
Following example demonstrates the use of CSS property perspective-origin with One-value syntax (Percentage value), both positive and negative values.
<html> <head> <style> .container { width: 150px; height: 150px; border: none; display: block; } .cube { width: 30%; height: 30%; perspective: 350px; transform-style: preserve-3d; margin-bottom: 80px; padding: 20px; } .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(100, 0, 100, 0.2); 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); } .po-per-positive { perspective-origin: 200%; } .po-per-negative { perspective-origin: -200%; } </style> </head> <body> <center> <h1>perspective-origin - x-position</h1> <div class="container"> <p>perspective-origin: 200%</p> <div class="cube po-per-positive"> <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-origin: -200%</p> <div class="cube po-per-negative"> <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> </center> </body> </html>
CSS perspective-origin - y-position (Keyword)
Following example demonstrates the use of CSS property perspective-origin with One-value syntax (Keyword value).
<html> <head> <style> .container { width: 150px; height: 150px; border: none; display: block; } .cube { width: 30%; height: 30%; perspective: 350px; transform-style: preserve-3d; margin-bottom: 80px; padding: 20px; } .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(100, 0, 100, 0.2); 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); } .po-y-top { perspective-origin: top; } .po-y-center { perspective-origin: center; } .po-y-bottom { perspective-origin: bottom; } </style> </head> <body> <center> <h1>perspective-origin: y-position (keyword)</h1> <div class="container"> <p>perspective-origin: top</p> <div class="cube po-y-top"> <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-origin: center</p> <div class="cube po-y-center"> <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-origin: bottom</p> <div class="cube po-y-bottom"> <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> </center> </body> </html>
CSS perspective-origin -x-position, y-position (Keywords)
Following example demonstrates the use of CSS property perspective-origin with Two-value syntax (Keyword values).
<html> <head> <style> .container { width: 150px; height: 150px; border: none; display: block; } .cube { width: 30%; height: 30%; perspective: 350px; transform-style: preserve-3d; margin-bottom: 80px; padding: 20px; } .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(100, 0, 100, 0.2); 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); } .po-left-top { perspective-origin: left top; } .po-center-bottom { perspective-origin: center bottom; } .po-right-bottom { perspective-origin: right bottom; } </style> </head> <body> <center> <h1>perspective-origin: x-position y-position (keyword)</h1> <div class="container"> <p>perspective-origin: left top</p> <div class="cube po-left-top"> <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-origin: center bottom</p> <div class="cube po-center-bottom"> <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-origin: right bottom</p> <div class="cube po-right-bottom"> <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> </center> </body> </html>
CSS perspective-origin - x-position y-position (Percentage)
Following example demonstrates the use of CSS property perspective-origin with Two-value syntax (Percentage values), both positive and negative values.
<html> <head> <style> .container { width: 150px; height: 150px; border: none; display: block; } .cube { width: 30%; height: 30%; perspective: 350px; transform-style: preserve-3d; margin-bottom: 80px; padding: 20px; } .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(100, 0, 100, 0.2); 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); } .po-per-positive { perspective-origin: 250% 100%; } .po-per-negative { perspective-origin: -200% -100%; } </style> </head> <body> <center> <h1>perspective-origin: x-position y-position</h1> <div class="container"> <p>perspective-origin: 250% 100%</p> <div class="cube po-per-positive"> <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-origin: -200% -100%</p> <div class="cube po-per-negative"> <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> </center> </body> </html>
CSS perspective-origin - x-position y-position (Length)
Following example demonstrates the use of CSS property perspective-origin with Two-value syntax (length values), both positive and negative values.
<html> <head> <style> .container { width: 150px; height: 150px; border: none; display: block; } .cube { width: 30%; height: 30%; perspective: 350px; transform-style: preserve-3d; margin-bottom: 80px; padding: 20px; } .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(100, 0, 100, 0.2); 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); } .po-len-positive { perspective-origin: 250px 100px; } .po-len-negative { perspective-origin: -200px -100px; } </style> </head> <body> <center> <h1>perspective-origin: x-position y-position</h1> <div class="container"> <p>perspective-origin: 250px 100px</p> <div class="cube po-len-positive"> <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-origin: -200px -100px</p> <div class="cube po-len-negative"> <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> </center> </body> </html>
To Continue Learning Please Login
Login with Google