Build roulette using jQuery and CSS3 rotation

Question

I'm trying to build a roulette to be controlled by the mouse, I'm not using canvas or svg but only CSS3 rotation and some jQuery.

What I want to achieve is when the mouse is over the roulette and he is clicked and holds down, I want the user to be able to rotate the wheel when he moves the mouse up and down. I'm using the event.offsetY to get the position of the mouse and according to this position I'm moving the roulette with or against the clock.

The problem is that I think the mouse offset position is changing according to the rotation of the wheel, is their a way to keep the mouse offset position "real" with the document?

-Or-

Someone know a better idea to accomplish that?

Please see the code here: http://jsfiddle.net/MZxgp/ (works on chrome only)

Many thanks!

Answer 1

I used a overlay div that doesn't move to capture the mouse events (see jsFiddle )

I hope this helps