Как я могу сделать анимацию, следуя за моим курсором

Question

Итак, если вы наведите курсор на компас, иголка вращается вокруг, однако, когда вы снимаете мышь, она просто сбрасывается.

Есть ли способ, что я могу либо:

• Сделать игла следовать везде, где моя мышь, когда он завис над и, если я взял мою мышь от на сказать южную позицию, игла оставаться там

или

• вертеться по наведению, как сейчас, но пауза, когда я взять мышь от него и возобновить, когда я вновь парить

сайт можно найти по адресу

newsunken.tumblr.com

и мой текущий код ...

.arrow { 
    background-image: url(compass.png); 
} 

.arrowhover { 
    position: absolute; 
    margin-top: -72px; 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -webkit-transition: all 0s ease-in-out; 
    -moz-transition: all 0s ease-in-out; 
    -ms-transition: all 0s ease-in-out; 
    -o-transition: all 0s ease-in-out; 
    transition: all 0s ease-in-out; 
} 

(то есть, чтобы остановить стрелку от вращения, когда я свожу mouse off)

и код прокрутки

.arrowhover:hover { 
    -webkit-transform: rotate(1440deg); 
    -moz-transform: rotate(1440deg); 
    -webkit-transition: all 1.7s ease-out; 
    -moz-transition: all 1.7s ease-in-out; 
    -ms-transition: all 1.7s ease-in-out; 
    -o-transition: all 1.7s ease-in-out; 
    transition: all 1.7s ease-in-out; 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
} 

Answer 1

Я не думаю, что вы можете сделать это исключительно с помощью CSS. вам нужно будет использовать javascript, чтобы получить координаты x и y и когда он находится в области компаса, поверните его в соответствии с положением мыши.

может быть, это будет полезно для вас: How to rotate image in relation to mouse position?