1

そのため、現在、コンパスにカーソルを合わせると針が回転しますが、マウスを離すとリセットされます。

私ができる方法はありますか：

  • マウスにカーソルを合わせたときに、マウスがどこにあっても針をたどらせます。たとえば、南の位置でマウスを外しても、針はそこに留まります。

また

  • 今のようにホバーで回転しますが、マウスを離すと一時停止し、再度ホバーすると再開します

ウェブサイトはで見つけることができます

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;
}

（つまり、マウスを離したときに矢印が回転しないようにするためです）

スピンコードは

.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);
}
4

1 に答える 1

0

純粋にCSSでそれを行うことはできないと思います。javascriptを使用してマウスのxとyの位置を取得し、コンパス領域内にあるときにマウスの位置に従って回転させる必要があります。

多分これはあなたに役立つでしょう： マウスの位置に関連して画像を回転させる方法は？

于 2013-03-05T12:10:34.670 に答える