<div id="box">
  <img src="http://p3.qhimg.com/bdr/__85/t01a2c69f5b7eeac889.jpg">
  <img src="http://p4.qhimg.com/bdr/__85/t012fca6fa6fe728aca.jpg">
  <img src="http://p8.qhimg.com/bdr/__85/t01a11e3b13964fd5e9.jpg">
  <img src="http://p3.qhimg.com/bdr/__85/t017baf7b77a994a54e.jpg">
  <img src="http://p5.qhimg.com/bdr/__85/t016e7066c6ab420738.jpg">
  <img src="http://p6.qhimg.com/bdr/__85/t01761d472910cd604c.jpg">
  <img src="http://p2.qhimg.com/bdr/__85/t01aab926f7e2cebf0e.jpg">
  <img src="http://p7.qhimg.com/bdr/__85/t014be3b3a24ffb638a.jpg">
  <img src="http://p8.qhimg.com/bdr/__85/t0186bdfba93c114775.jpg">
  <img src="http://p3.qhimg.com/bdr/__85/t01c143c4dc884f79a7.jpg">
</div>

*{padding: 0;
    margin: 0;}
body,html{height:100%;}
body{background-size: 100% 100%;}
#box{width: 280px;
        height: 400px;
        position: fixed;
        left: 0;
        right: 0;
        top:0;
        bottom: 0;
        margin: auto;
        transform-style: preserve-3d;
        transform: rotateX(0deg) rotateY(0deg);
        animation: go 45s linear infinite;
       }
#box img{width: 280px;
             height: 400px;
             position: absolute;
             left: 0;
             top: 0;
    }
#box img:nth-child(1){
        transform: rotateY(0deg) translateZ(650px);}
#box img:nth-child(2){
        transform: rotateY(36deg) translateZ(650px);}
#box img:nth-child(3){
        transform: rotateY(72deg) translateZ(650px);}
#box img:nth-child(4){
        transform: rotateY(108deg) translateZ(650px);}
#box img:nth-child(5){
        transform: rotateY(144deg) translateZ(650px);}
#box img:nth-child(6){
        transform: rotateY(180deg) translateZ(650px);}
#box img:nth-child(7){
        transform: rotateY(216deg) translateZ(650px);}
#box img:nth-child(8){
        transform: rotateY(252deg) translateZ(650px);}
#box img:nth-child(9){
        transform: rotateY(288deg) translateZ(650px);}
#box img:nth-child(10){
        transform: rotateY(324deg) translateZ(650px);}
@keyframes go {
        0%{transform: rotateX(0deg) rotateY(0deg);}
        25%{transform: rotateX(20deg) rotateY(180deg);}
        50%{transform: rotateX(0deg) rotateY(360deg);}
        75%{transform: rotateX(-20deg) rotateY(540deg);}
        100%{transform: rotateX(0deg) rotateY(720deg);}
    
    }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.