JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<div class="stage" style="width: 240px; height: 160px;">
<div class="spinner">
<img style="-webkit-transform: rotateY(0deg) translateZ(165px); -moz-transform: rotateY(0deg) translateZ(165px); padding: 0px 20px;" src="http://www.the-art-of-web.com/images/beach1.jpg" width="200" height="160" alt="">
<img style="-webkit-transform: rotateY(72deg) translateZ(165px); -moz-transform: rotateY(72deg) translateZ(165px); padding: 0px 13.5px;" src="http://www.the-art-of-web.com/images/beach2.jpg" width="213" height="160" alt="">
<img style="-webkit-transform: rotateY(144deg) translateZ(165px); -moz-transform: rotateY(144deg) translateZ(165px); padding: 0px 0px;" src="http://www.the-art-of-web.com/images/beach3.jpg" width="240" height="160" alt="">
<img style="-webkit-transform: rotateY(216deg) translateZ(165px); -moz-transform: rotateY(216deg) translateZ(165px); padding: 0px 13.5px;" src="http://www.the-art-of-web.com/images/beach4.jpg" width="213" height="160" alt="">
<img style="-webkit-transform: rotateY(288deg) translateZ(165px); -moz-transform: rotateY(288deg) translateZ(165px); padding: 0px 1px;" src="http://www.the-art-of-web.com/images/beach5.jpg" width="238" height="160" alt="">
</div>
</div>

CSS

@-webkit-keyframes spinner {
  from { }
  to   { -webkit-transform: rotateY(-360deg); }
}@-moz-keyframes spinner {
  from { -moz-transform: rotateY(0);    }
  to   { -moz-transform: rotateY(-360deg); }
}.stage{margin:1em auto;-webkit-perspective:1200px;-moz-perspective:1200px}.spinner{-webkit-animation-name:spinner;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:infinite;-webkit-animation-duration:6s;-webkit-transform-style:preserve-3d;-moz-animation-name:spinner;-moz-animation-timing-function:linear;-moz-animation-iteration-count:infinite;-moz-animation-duration:6s;-moz-transform-style:preserve-3d}.spinner:hover{-webkit-animation-play-state:paused;-moz-animation-play-state:paused}.spinner img,.spinner5 img{position:absolute;border:1px solid #ccc;background:rgba(255,255,255,.8);box-shadow:inset 0 0 20px rgba(0,0,0,.2)}</style><style type="text/css">@-webkit-keyframes spinner5 {
    from,15% { -webkit-transform: rotateY(0);       }
    20%,35%  { -webkit-transform: rotateY(-72deg);  }
    40%,55%  { -webkit-transform: rotateY(-144deg); }
    60%,75%  { -webkit-transform: rotateY(-216deg); }
    80%,95%  { -webkit-transform: rotateY(-288deg); }
    to       { -webkit-transform: rotateY(-360deg); }
  }
.spinner{
    -webkit-animation-name: spinner;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
-webkit-transform-style: preserve-3d;
}