javascript - css3 rotate according to cursor -

i trying following:
create square div on screen , whenever cursor hovering it, square should horizontally rotate (rotatey).
have done:
http://jsbin.com/ujolop/1/edit

html:

<div class="a"></div> 

css:

.a {   width: 200px;   height: 200px;   background-color: green; } 

javascript:

var maxrotate = 30; //deg  $('.a').on('mousemove', function(event) {   var $this = $(this),       width = $this.width(),       center = width / 2,       left = $this.position().left,       currelposx = event.clientx - left,       percent = (currelposx - center) / center,       rotate = percent * maxrotate;    $this.css('transform', 'rotatey(' + rotate + 'deg)'); }); 

this isn't work. jumps , of time doesn't respond cursor hover.
ideas?

update
if right, unknown reasons working fine in firefox doesn't working in chrome. idea why? use correct event (mousemove)?

i edited of calculation in javascript :

left = $this.parent().offset().left, currelposx = event.pagex - left, percent = (currelposx <= center) ? currelposx / center : (width - currelposx) / center 

if console.log(left) can see there problem of accuracy, code above better determine exact currelposx.

about percent calculation, if go further center (maximum rotation), rotation should decrease maximum 0 @ left edge of div.

i included div.a inside div.c because mousemove event wasn't working after apply css rotation.

here edit of jsbin.