JSFiddle - React, Tailwind, and code Playground

by Dinesh Singh

HTML

<div class="rotate">
<img src="http://s8.postimg.org/uxggntvir/sprite.jpg" />
</div>

CSS

.rotate
{max-width:450px;
	margin:auto;
	overflow:hidden;
	border:1px solid #000;
}
.rotate img
{
	position: relative;
	left:-1360px;
}

JavaScript

$(document).ready(function(){
//$( '.rotate' ).on( 'mousemove', function( e ) {
    $( '.rotate' ).mousemove(function(e) {
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    //$( "#log" ).text(x +', '+ y);
    if (x > 0)
    {
        $(".rotate img").css({"left":"0px"});
    }
    
    if (x > 60)
    {
        $(".rotate img").css({"left":"-450px"});
    }
    if (x > 120)
    {
        $(".rotate img").css({"left":"-900px"});
    }
    if (x > 180)
    {
        $(".rotate img").css({"left":"-1350px"});
    }
    if (x > 240)
    {
        $(".rotate img").css({"left":"-1800px"});
    }
    if (x > 300)
    {
        $(".rotate img").css({"left":"-2250px"});
    }
    if (x > 360)
    {
        $(".rotate img").css({"left":"-2700px"});
    }   
});
});