Как вращать элемент влево и вправо на основе движения мыши с помощью JQuery & CSS

Question

У меня есть фиксированная ширина элемент в середине экрана, абсолютный расположен:

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

Когда курсор находится в середине на экране, я хочу отобразить выше div полностью прямо. Когда я перемещаю курсор влево от экрана, я хочу повернуть div влево на 20 градусов, и то же самое происходит и с правой стороны. Это то, что я получил до сих пор:

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/

Любые советы о том, как действовать дальше? Благодарю.

Answer 1

var now = 40 * pageX/bodywidth - 20; 

Это должно ответить на ваш вопрос.

Codepen because Jsfiddle acts weird here

Answer 2

Вы должны карту половина тела до значения между 0 и 180

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

См this Fiddle