JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="rect">
</div>

<p id="p"></p>

CSS

.rect {
    height: 100px;
    margin: 50px;
    background: lightblue;
    -webkit-transition: 5s;
    transition: 5s;
}

JavaScript

var t, 
    c = 0;

$('.rect').on('mousemove', function (e) {
    //$('<div/>').text(e.pageY).appendTo('body');
}).on('mouseenter', function(){
    (function x(){
        c++;
        t = setTimeout(x, 1);
    })();
}).on('mouseleave', function() {
    clearTimeout(t);
    var k = Math.floor((c)*8000);
    $(this).css({'-webkit-transform':'perspective(300px) rotateX('+ k +'deg)'});
    c=0;
});