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

HTML

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

CSS

.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; 
   } 
}

Result