JSFiddle - React, Tailwind, and code Playground

by Mehmet Yener

HTML

<div class="world">
    <img class="logo" src="https://scontent-frt3-2.xx.fbcdn.net/v/t1.0-9/10376145_10204000461395715_269859484226628798_n.jpg?oh=d9779a6a98d82de3b8d15026a33fc4cd&oe=5A1EF63D"/>
</div>

CSS

.world{
    position: relative;
    height: 150px;
    width: 300px;
    margin: 50px;
    padding:10px;
    -webkit-perspective: 150px;
         -moz-perspective: 150px;
          -ms-perspective: 150px;
              perspective: 150px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(45deg); /* Chrome, Safari, Opera  */
    transform: rotateX(45deg);
}

.logo{
    -webkit-transform: rotateX(0deg);
}

JavaScript

var i = 0;

function loopLi() {
    setInterval(function() {        
            i++;
            $('.logo').css('-webkit-transform','rotateX('+i+'deg)');
            $('.logo').css('transform','rotateX('+i+'deg)');        

    }, 10);
}

$(loopLi);