JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<!DOCTYPE html>
<html>
  <head>
    <style>
      #anim1 {
        -webkit-perspective: 800;
        perspective: 800;
      }
      
      #anim1 img {
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg);
        -webkit-animation: tb 6s linear;
        -webkit-animation-iteration-count: 10;
        -webkit-animation-delay: 5s;
      }
      

    </style>
  </head>
  <body>
    <div id="anim1">
        <img src="http://www.jewanda-magazine.com/wp-content/uploads/2012/02/coton-africain-london-fashion-week-3-430x430.png"/>
    </div>
  </body>
</html>

CSS

@-webkit-keyframes tb {
    
            0% { -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg);
}
        10% { -webkit-transform: rotate3d(1, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
margin-left:200px;
}
        20% {  -webkit-transform: rotate3d(0, 1, 0, 260deg);
        transform: rotate3d(0, 0, 1, 60deg);margin-left:800px;}
        40% {  -webkit-transform: rotate3d(1, 0, 1, 360deg);
        transform: rotate3d(0, 0, 1, 60deg);margin-left:-200px;}
        60% { -webkit-transform: rotate3d(0, 1, 1, 460deg);
        transform: rotate3d(0, 0, 1, 560deg);}
        100% { -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);}
    }