JSFiddle - React, Tailwind, and code Playground

by Mehmet Yener

HTML

<div class="world">
    <img class="logo" src="http://loscodigosdescuentos.es/filemanager/f/Espana/viagogo_logo.jpg"/>
</div>

CSS

.world{
    position: relative;
    height: 150px;
    width: 300px;
    margin: 50px;
    padding:10px;
    -webkit-perspective: 200px;
         -moz-perspective: 200px;
          -ms-perspective: 200px;
              perspective: 200px;
    -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{
    max-width:550px;
    -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);