How to rotate element to left and right based on mouse movement using jQuery & CSS

Question

I have a fixed width element in the middle of the screen, absolute positioned:

div {
    width:50px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px -25px;
    background:red;
}

When the cursor is in the middle of the screen, i want to display the above div completely straight. When i move the cursor to the left of the screen, i want to rotate the div to the left by 20 degrees, and the same goes to the right side too. This is what i got so far:

var bodywidth = $("body").width();
function mouse(evt) {

    //getting mouse dimentions
    var pageX = event.pageX;                
    var now = bodywidth / pageX;

    $("div").css({
        transform: 'rotate(' + now + 'deg)'
    });

}
$("body").mousemove(mouse);

http://jsfiddle.net/rsog7e6f/

Any tips on how to proceed? Thanks.

Answer 1

var now = 40 * pageX / bodywidth - 20;

This should answer your question.

Codepen because Jsfiddle acts weird here

Answer 2

You need to map half of the body with to a value between 0 and 180

function mapWidthToDegs(x,w) {
    var factor = 180/(w/2);
    return factor * x - w
}

See this Fiddle