JSFiddle - React, Tailwind, and code Playground

by Mariagrazia_Lunghi

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<!-- funziona solo in firefox--->        
<img src="http://sandropaganotti.com/wp-content/goodies/courses/CorsoCSS3/assets/tiger.jpg">

CSS

body{
    
   tranform-style:preserve-3d; 
   perspective:500px;
}

img{
  transform: rotateX(30deg);
 /* transform: translate(100px,100px) scale(0.5);
 /* transform:rotate(30deg);*/
 animation:ruota 2s infinite linear alternate;
 /* transform-origin:100% 50%;
 animation-fill-mode:forwards; */
}

/* @keyframes ruota{
    
    0% {transform: rotate(30deg);}  
    80% {transform: rotate(90deg);} 
    100% {transform: rotate(90deg);} 
}
*/

@keyframes ruota{
    
    0% {transform: rotateX(30deg);}  
    80% {transform: rotateX(90deg);}
    100% {transform: rotateX(90deg);}
}