JSFiddle - React, Tailwind, and code Playground

by web-nfo.com

HTML

<div id="image">
   <img src="https://cs.photoprintit.com/web/85100005/assets/85000005/product_images/tc_mok.png" />
</div>

CSS

#image img {
    -webkit-transition-duration: 0.5s;
    -webkit-transition-property: transform;
    -webkit-backface-visibility: visible;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: perspective(0px) rotateY(0deg);
}

#image.left img {
-webkit-backface-visibility: visible;
-webkit-transform-origin: 50% 50%;
-webkit-transform: perspective(190px) rotateY(13deg);
   -webkit-transform: perspective(190px) rotateY(13deg) skew(1deg, -1deg); 
    -webkit-transition-property: transform;
-webkit-transition-duration: 0.5s;
}

JavaScript

function move()
{
    $img = $('#image');
    
    if($('#image').hasClass('left')) {
            
    }
    $('#image').toggleClass('left');
}

setInterval(function(){ move(); }, 1000);