- CSS Basics
- CSS Tutorial
- CSS Where to Write
- CSS Syntax
- CSS Selectors
- CSS Combinators
- CSS Attribute Selectors
- CSS Pseudo Classes
- CSS Pseudo-Classes
- CSS :link :hover :active
- CSS :first-child
- CSS :first-of-type
- CSS :last-child
- CSS :last-of-type
- CSS :only-child
- CSS :only-of-type
- CSS :nth-child()
- CSS :nth-of-type()
- CSS :nth-last-child()
- CSS :nth-last-of-type()
- CSS :focus
- CSS :not()
- CSS :root
- CSS :empty
- CSS :target
- CSS :lang()
- CSS :valid
- CSS :invalid
- CSS :optional
- CSS :required
- CSS :in-range
- CSS :out-of-range
- CSS :enabled :disabled
- CSS :read-only
- CSS :read-write
- CSS Pseudo Elements
- CSS Pseudo-Elements
- CSS ::before
- CSS ::after
- CSS ::first-letter
- CSS ::first-line
- CSS ::marker
- CSS ::selection
- CSS Colors
- CSS Colors
- CSS rgb() and rgba()
- CSS hsl() and hsla()
- CSS Background
- CSS background
- CSS background-color
- CSS background-image
- CSS linear-gradient()
- CSS radial-gradient()
- CSS conic-gradient()
- CSS repeating-linear-gradient()
- CSS repeating-radial-gradient()
- CSS repeating-conic-gradient()
- CSS background-position
- CSS background-size
- CSS background-repeat
- CSS background-origin
- CSS background-clip
- CSS background-attachment
- CSS background-blend-mode
- CSS Border
- CSS border
- CSS border-style
- CSS border-style Values
- CSS border-width
- CSS border-color
- CSS border-top
- CSS border-top-style
- CSS border-top-width
- CSS border-top-color
- CSS border-bottom
- CSS border-bottom-style
- CSS border-bottom-width
- CSS border-bottom-color
- CSS border-left
- CSS border-left-style
- CSS border-left-width
- CSS border-left-color
- CSS border-right
- CSS border-right-style
- CSS border-right-width
- CSS border-right-color
- CSS border-top-left-radius
- CSS border-top-right-radius
- CSS border-bottom-left-radius
- CSS border-bottom-right-radius
- CSS border-radius
- CSS border-collapse
- CSS empty-cells
- CSS border-spacing
- CSS border-image
- CSS border-image-source
- CSS border-image-slice
- CSS border-image-width
- CSS border-image-outset
- CSS border-image-repeat
- CSS Fonts
- CSS font
- CSS font-style
- CSS font-variant
- CSS font-variant-caps
- CSS font-weight
- CSS font-size
- CSS line-height
- CSS font-family
- CSS font-stretch
- CSS font-kerning
- CSS font-face
- CSS font-feature-settings
- CSS Text
- CSS Text
- CSS color
- CSS text-decoration
- CSS text-decoration-line
- CSS text-decoration-color
- CSS text-decoration-style
- CSS text-underline-position
- CSS text-align
- CSS text-align-last
- CSS text-justify
- CSS letter-spacing
- CSS word-spacing
- CSS text-shadow
- CSS text-transform
- CSS white-space
- CSS text-indent
- CSS word-wrap
- CSS overflow-wrap
- CSS word-break
- CSS text-overflow
- CSS hyphens
- CSS direction
- CSS unicode-bidi
- CSS writing-mode
- CSS Padding & Margin
- CSS Box Model
- CSS padding
- CSS padding-top
- CSS padding-right
- CSS padding-bottom
- CSS padding-left
- CSS margin
- CSS margin-top
- CSS margin-right
- CSS margin-bottom
- CSS margin-left
- CSS Padding Vs Margin
- CSS Dimensions
- CSS Dimensions
- CSS height
- CSS max-height
- CSS min-height
- CSS width
- CSS max-width
- CSS min-width
- CSS overflow
- CSS overflow-x
- CSS overflow-y
- CSS Multi-Column Layout
- CSS Multi-Column Layout
- CSS columns
- CSS column-width
- CSS column-count
- CSS column-rule
- CSS column-rule-width
- CSS column-rule-style
- CSS column-rule-color
- CSS column-span
- CSS column-fill
- CSS Display
- CSS display
- CSS inline Vs block
- CSS inline Vs inline-block
- CSS flex Vs inline-flex
- CSS inline-flex Vs inline-block
- CSS flex Vs grid
- CSS grid Vs inline-grid
- CSS Float and Position
- CSS float
- CSS clear
- CSS Align
- CSS position
- CSS left
- CSS right
- CSS top
- CSS bottom
- CSS Style List Marker
- CSS Style List Marker
- CSS list-style
- CSS list-style-type
- CSS list-style-position
- CSS list-style-image
- CSS Outline
- CSS outline
- CSS outline-width
- CSS outline-style
- CSS outline-color
- CSS outline-offset
- CSS Effects
- CSS Effects
- CSS Gradients
- CSS Shadows
- CSS box-shadow
- CSS opacity
- CSS Transforms
- CSS transform
- CSS translateX()
- CSS translateY()
- CSS translateZ()
- CSS translate()
- CSS translate3d()
- CSS scaleX()
- CSS scaleY()
- CSS scaleZ()
- CSS scale()
- CSS scale3d()
- CSS rotateX()
- CSS rotateY()
- CSS rotateZ()
- CSS rotate()
- CSS rotate3d()
- CSS skewX()
- CSS skewY()
- CSS skew()
- CSS matrix()
- CSS matrix3d()
- CSS perspective() Function
- CSS perspective Property
- CSS perspective-origin
- CSS transform-style
- CSS transform-origin
- CSS 2D Transform
- CSS 3D Transform
- CSS Transition
- CSS transition
- CSS transition-property
- CSS transition-duration
- CSS transition-timing-function
- CSS transition-delay
- CSS Animation
- CSS animation
- CSS @keyframes
- CSS animation-name
- CSS animation-duration
- CSS animation-timing-function
- CSS animation-delay
- CSS animation-iteration-count
- CSS animation-direction
- CSS animation-fill-mode
- CSS animation-play-state
- CSS Grid Layout
- CSS Grid Layout
- CSS gap
- CSS column-gap
- CSS row-gap
- CSS grid-area
- CSS grid-column-start
- CSS grid-column-end
- CSS grid-row-start
- CSS grid-row-end
- CSS grid-template
- CSS grid-template-columns
- CSS grid-template-rows
- CSS grid-template-areas
- CSS grid-auto-columns
- CSS grid-auto-rows
- CSS grid-auto-flow
- CSS grid-column
- CSS grid-row
- CSS Template Layout
- CSS Flex Layout
- CSS FlexBox
- CSS flex-direction
- CSS flex-wrap
- CSS flex-flow
- CSS justify-content
- CSS align-content
- CSS align-items
- CSS flex-grow
- CSS flex-shrink
- CSS flex-basis
- CSS flex
- CSS align-self
- CSS order
- CSS Misc
- CSS Length Units
- CSS Style Link
- CSS Navigation Bar
- CSS Style Image
- CSS Style Tables
- CSS table-layout
- CSS caption-side
- CSS Create Frames
CSS perspective-origin
The CSS perspective-origin property is used to define the position of perspective. For example:
<!DOCTYPE html> <html> <head> <style> .a, .b, .c, .d{width: 120px; height: 120px; margin-left: 64px; perspective: 260px; border: 1px solid peru;} .a{perspective-origin: right;} .b{perspective-origin: left;} .c{perspective-origin: top;} .d{perspective-origin: bottom;} .a1, .b1, .c1, .d1 {width: 120px; height: 120px; background: crimson; transform-style: preserve-3d; transform: rotateX(45deg);} </style> </head> <body> <h2>perspective-origin: right</h2> <div class="a"> <div class="a1"></div> </div> <h2>perspective-origin: left</h2> <div class="b"> <div class="b1"></div> </div> <h2>perspective-origin: top</h2> <div class="c"> <div class="c1"></div> </div> <h2>perspective-origin: bottom</h2> <div class="d"> <div class="d1"></div> </div> </body> </html>
perspective-origin: right
perspective-origin: left
perspective-origin: top
perspective-origin: bottom
Note - The perspective-origin property must be used together with the perspective property.
Note - The perspective places the view front or back from z=0 plane.
CSS perspective-origin Syntax
The syntax of perspective-origin property in CSS, is:
perspective-origin: x-axis y-axis;
The x-axis parameter is used to define, where the view should be placed on x-axis, and its value should be any of the following:
- left - places the view at left on x-axis
- right - places the view at right on x-axis
- center - places the view at center on x-axis
- length - We can also use custom length like 20px, 2em etc. to place the view at required position on x-axis
The y-axis parameter is used to define where the view should be placed on y-axis, and its value should be any of the following:
- top - places the view at top on y-axis
- bottom - places the view at bottom on y-axis
- center - places the view at center on y-axis
- length - We can also use custom length like 30px, 1.4em etc. to place the view at required position on y-axis
Note - The default value of both x-axis and y-axis parameter is 50%
Note - The initial and inherit keyword can also be used to define the perspective-origin property. The initial is used to use the default value, whereas inherit is used to use the value inherited by the parent element.
CSS perspective-origin Example
<!DOCTYPE html> <html> <head> <style> .a, .b, .c, .d, .e, .f, .g, .h, .i{width: 120px; height: 120px; margin-left: 100px; perspective: 260px; border: 1px solid peru;} .a{perspective-origin: right bottom;} .b{perspective-origin: right top;} .c{perspective-origin: center top;} .d{perspective-origin: 10% 60%;} .e{perspective-origin: 10% 120%;} .f{perspective-origin: 10% 220%;} .g{perspective-origin: 220% 20%;} .h{perspective-origin: 440% 120%;} .i{perspective-origin: 60px 200px;} .a1, .b1, .c1, .d1, .e1, .f1, .g1, .h1, .i1 {width: 120px; height: 120px; background: crimson; transform-style: preserve-3d; transform: rotateX(45deg);} </style> </head> <body> <h2>perspective-origin: right bottom</h2> <div class="a"> <div class="a1"></div> </div> <h2>perspective-origin: right top</h2> <div class="b"> <div class="b1"></div> </div> <h2>perspective-origin: center top</h2> <div class="c"> <div class="c1"></div> </div> <h2>perspective-origin: 10% 60%</h2> <div class="d"> <div class="d1"></div> </div> <h2>perspective-origin: 10% 120%</h2> <div class="e"> <div class="e1"></div> </div> <h2>perspective-origin: 10% 220%</h2> <div class="f"> <div class="f1"></div> </div> <h2>perspective-origin: 220% 20%</h2> <div class="g"> <div class="g1"></div> </div> <h2>perspective-origin: 440% 120%</h2> <div class="h"> <div class="h1"></div> </div> <h2>perspective-origin: 60px 200px</h2> <div class="i"> <div class="i1"></div> </div> </body> </html>
perspective-origin: right bottom
perspective-origin: right top
perspective-origin: center top
perspective-origin: 10% 60%
perspective-origin: 10% 120%
perspective-origin: 10% 220%
perspective-origin: 220% 20%
perspective-origin: 440% 120%
perspective-origin: 60px 200px
« Previous Tutorial Next Tutorial »