JSFiddle - React, Tailwind, and code Playground

by Emre Erkan

HTML

<div id="wrapper">
    <img src="https://fb.souperapps.com/gittigidiyor/tab-like/blue-arrow.png" class="blue" />
    <img src="https://fb.souperapps.com/gittigidiyor/tab-like/red-arrow.png" class="red" />
    <img src="https://fb.souperapps.com/gittigidiyor/tab-like/yellow-arrow.png" class="yellow" />
    <img src="https://fb.souperapps.com/gittigidiyor/tab-like/green-arrow.png" class="green" />
</div>

CSS

#wrapper {
    background: url('https://fb.souperapps.com/gittigidiyor/tab-like/bg.jpg') no-repeat left top;
    position:relative;
    width:810px;
    height:600px;
    z-index:1;
}
        .blue {
            position: absolute;
            top: 177px;
            left: 214px;
            -moz-transform: rotate(24.86deg);
            -webkit-transform: rotate(24.86deg);
            -o-transform: rotate(24.86deg);
            -ms-transform: rotate(24.86deg);
            transform: rotate(24.86deg);
        }
        .red {
            position: absolute;
            top: 177px;
            left: 524px;
            -moz-transform: rotate(148.36deg);
            -webkit-transform: rotate(148.36deg);
            -o-transform: rotate(148.36deg);
            -ms-transform: rotate(148.36deg);
            transform: rotate(148.36deg);
        }
        .yellow {
            position: absolute;
            top: 373px;
            left: 214px;
            -moz-transform: rotate(-28.88deg);
            -webkit-transform: rotate(-28.88deg);
            -o-transform: rotate(-28.88deg);
            -ms-transform: rotate(-28.88deg);
            transform: rotate(-28.88deg);
        }
        .green {
            position: absolute;
            top: 373px;
            left: 524px;
            -moz-transform: rotate(213.50deg);
            -webkit-transform: rotate(213.50deg);
            -o-transform: rotate(213.50deg);
            -ms-transform: rotate(213.50deg);
            transform: rotate(213.50deg);
        }

JavaScript

var $img = $('img'), offsets = {};
$img.each(function(i, item) {
    offsets[item.className] = $(item).offset();
});
$(document).mousemove(function(evt){
    $img.each(function(i, item) {
        var img = $(item),
            offset = offsets[item.className],
            center_x = (offset.left) + (img.width()/2),
            center_y = (offset.top) + (img.height()/2),
            mouse_x = evt.pageX,
            mouse_y = evt.pageY,
            radians = Math.atan2(mouse_x - center_x, mouse_y - center_y),
            degree = (radians * (180 / Math.PI) * -1) + 90; 
        img.css('-moz-transform', 'rotate('+degree+'deg)');
        img.css('-webkit-transform', 'rotate('+degree+'deg)');
        img.css('-o-transform', 'rotate('+degree+'deg)');
        img.css('-ms-transform', 'rotate('+degree+'deg)'); 
    });
});