JSFiddle - React, Tailwind, and code Playground

by wesbos

HTML

<div class="dump"></div>


<!--<span class="dot"></span>-->


<span class="outer"><span class="eye"></span></span>

<span class="outer"><span class="eye"></span></span>

CSS

span.outer {
width:100px;
    height:100px;
    border:3px solid black;
    border-radius:120px;
    display:block;
    margin:0px;
    float:left;
}

span.eye {
width:50px; height:50px;
    background:black;
    display:block;
    border-radius:50px;
    margin-left:25px;

}

.dot {
    width:4px; height:4px;
    margin:150px;
    background:red;
    display:block;
    
}

JavaScript

$(function() {
         
    var dump = $('.dump');
    
    $(window).mousemove(function(e) {

// cache our objects
    var eye = $('.eye'),
        outer = $('.outer'),
// get x and y of mouse
        mX = e.pageX,
        mY = e.pageY,
// get center x and y of element
        elOffset = eye.offset(),
        eX = elOffset.left + ( eye.width() / 2 ),
        eY = elOffset.top + ( eye.height() / 2 ),
// calcuate the difference
        dX = eX - mX,
        dY = eY - mY,
// find the Angle
        angle = Math.atan2(dX,dY),
// Find the degrees
        deg = angle/(Math.PI/180);
// spit to the dump
    dump.text(deg);
        $('.outer').css({'-webkit-transform':'rotate('+deg * -1 +'deg)'});

        
    });
    
    
    
    
});