JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="apDiv1"><img src="http://img402.imageshack.us/img402/2017/bighand.png" class="image"/> <br>
    (Not actual picture I'm trying to rotate, but it'll do for now)
</div>

CSS

#apDiv1 {
    position:absolute;
    width:400px;
    height:327px;
    z-index:1;
    left: 105px;
    top: 98px;
}

JavaScript

var img = $('#parent');
if(img.length > 0){
    var offset = img.offset();
    function mouse(evt){
        var center_x = (offset.left) + (img.width()/2);
        var center_y = (offset.top) + (img.height()/2);
        var mouse_x = evt.pageX; var mouse_y = evt.pageY;
        var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        var degree = (radians * (180 / Math.PI) * -1) + 90; 
        img.css('-moz-transform', 'rotateY('+degree+'deg)');
        img.css('-webkit-transform', 'rotateY('+degree+'deg)');
        img.css('-o-transform', 'rotateY('+degree+'deg)');
        img.css('-ms-transform', 'rotateY('+degree+'deg)');
    }
    $(document).mousemove(mouse);
}