JSFiddle - React, Tailwind, and code Playground

by Yuan Hong

HTML

<div class="world">
    <img class="logo" src="https://scontent-a-lga.xx.fbcdn.net/hphotos-prn1/t1/1606849_430596297043883_691957578_n.jpg"/>
</div>

CSS

.world{
    position: relative;
    height: 10px;
    width: 200px;
    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);