CSS perspective-origin Property

Description

The perspective-origin property sets the coordinates of the point where the observer is looking. This property works in conjunction with the perspective property and determines the point of convergence of the lines in perspective.

Initial value

50% 50%

Applies to

Transformable elements

Inherited

No

Media

Visual

Computed value

For <length> the absolute value, otherwise a percentage.

Animatable

Yes

CSS Version

CSS3

JavaScript syntax

object.style.perspectiveOrigin

Syntax

perspective-origin: [ left | center | right | top | bottom | <percentage> | <length> ]
 |
   [ left | center | right | <percentage> | <length> ]
   [ top | center | bottom | <percentage> | <length> ]
 |
   [ center | [ left | right ] ] && [ center | [ top | bottom ] ]

Values

• <length>A length value gives a fixed length as the offset. The value for the horizontal and vertical offset represent an offset from the top left corner of the bounding box.
• <percentage>A percentage for the horizontal perspctive offset is relative to the width of the bounding box. A percentage for the vertical offset is relative to height of the bounding box. The value for the horizontal and vertical offset represent an offset from the top left corner of the bounding box.
• bottomComputes to '100%' for the vertical position.
• centerComputes to '50%' ('left 50%') for the horizontal position if the horizontal position is not otherwise specified, or '50%' ('top 50%') for the vertical position if it is.
• leftComputes to '0%' for the horizontal position.
• rightComputes to '100%' for the horizontal position.
• topComputes to '0%' for the vertical position.

Example

<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>

.cube { 
   font-size: 5em; 
   width: 2em; 
   height: 2em; 
   margin: 1em auto; 
   transform-style: preserve-3d; 
   perspective: 500px; 
   animation: move-origin infinite 2s; 
} 
.side { 
   position: absolute; 
   width: 2em; 
   height: 2em; 
   background: rgba(255, 99, 71, 0.6); 
   border: 1px solid rgba(0, 0, 0, 0.5); 
   color: white; 
   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); 
} 
@keyframes move-origin { 
   0% { 
      perspective-origin: 0 0; 
   } 
   25% { 
      perspective-origin: 100% 0; 
   } 
   50% { 
      perspective-origin: 100% 100%; 
   } 
   75% { 
      perspective-origin: 0 100%; 
   } 
   100% { 
      perspective-origin: 0 0; 
   } 
}

Browser Support

Desktop
10	12	36	16	23	9
Tablets / Mobile
4.4	36	16	24	9	3.0

Last updated by CSSPortal on: 3rd November 2019