- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
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