CSS perspective-origin Property - Playground Example

<!DOCTYPE html>
<html>
<head>
<style type="text/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; 
   } 
}
</style>
</head>
<body>
<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>
</body>
</html>