CSS perspective-origin Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The perspective-origin CSS property determines the point from which a 3D transformed element appears to be viewed in space. It essentially defines the vanishing point for perspective transformations, affecting how an element is scaled and skewed in relation to the viewer's perspective. This property is commonly used in combination with perspective and other 3D transform properties to create visually compelling effects, such as 3D rotations and perspective shifts, in web design and graphics. By adjusting the perspective-origin, web developers can control the visual impact of 3D transformations and enhance the user experience.

Initial value: 50% 50%
Applies to: Transformable elements
Inherited: No
Computed value: For <length> the absolute value, otherwise a percentage.
Animatable: Yes
JavaScript syntax: object.style.perspectiveOrigin

Interactive Demo

perspective-origin: center;

perspective-origin: top;

perspective-origin: bottom right;

perspective-origin: -170%;

front

back

right

left

top

bottom

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

Editor