Rotate Element on Mouse Scroll

HTML

<input class="info" type="text" disabled>
<section class="area">
    <div id="rotator"><div>
</section>

CSS

body {
    background: black;
    margin: 0;
    height:1000px;
}
#rotator {    
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 50%;
    margin-left: -50px;
    width: 100px;
    height: 100px;
    background: red;
}

.area {
    position: absolute;
    width: 100%;
    height: 100%;
}

.info {
    position: absolute;
    z-index: 99;
}

JavaScript

//get offset values for centering coords
var offsetWidth  = $('.area').width()/2;
var offsetHeight = $('.area').height()/2;
var screenHeight = $(window).height();
var min = -screenHeight/2;
var max = screenHeight/2;

$(window).scroll(function(e) {
    
   //get x and y for mouse, offset to center
   mouseX = offsetWidth  - e.pageX; 
   mouseY = offsetHeight - e.pageY;
    
   var deg = map(mouseY, min, max, 180, -180);
    
   deg = Math.round(deg); 
    
   $('.info').attr('value', deg);
    
   rotate(deg);
    
   //print the mouse coords
   //$('.info').attr('value', 'x: ' + mouseX + ', y: ' + mouseY);
     
});


function rotate(deg) {   
    
    $('#rotator').css('-webkit-transform', 'rotate('+deg+'deg)');
    $('#rotator').css('-moz-transform', 'rotate('+deg+'deg)');
    $('#rotator').css('-ms-transform', 'rotate('+deg+'deg)');
    $('#rotator').css('-o-transform', 'rotate('+deg+'deg)');

    /* Internet Explorer */
    //filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}


function map(value, in_min, in_max, out_min, out_max) {
  return (value-in_min)*(out_max-out_min)/(in_max-in_min)+out_min;
}