4

私は次のようなCSSトランジションを使用しています：

div
{
   -webkit-transform: rotate(0deg);
   -webkit-transition: -webkit-transform 2s;
}
div:hover
{
   -webkit-transform: rotate(720deg);
}

これにより、divが2秒間2回回転します。次に、マトリックスを使用して、画像を回転および拡大縮小できるようにします。ただし、行列は度を使用しませんが、cos（a）とsin（a）を使用します。ご存知のとおり、cos（0）= cos（360）= cos（720）などです。したがって、行列を使用すると、画像をさらに回転させることができません。 359度より。

そこで、賢くすることにしました。JavaScriptを使用して、回転した要素（720度）から行列を取得しました。次のようになります。

-webkit-transform: matrix(1, -0.0000000000000004898587196589413, 0.0000000000000004898587196589413, 1, 0, 0);

ただし、このマトリックスを使用すると、要素を回転させることができません。後でサイズを計算して、それも適用します。

だから問題は-css3行列変換を使用して要素を359度以上回転させるにはどうすればよいですか？

4

1 に答える 1

5

CSS3のマトリックスは定義します

ある座標系から別の座標系への数学的マッピング

（W3Cリファレンス）、

これは、ご指摘のとおり、720度は360度とまったく同じであることを意味します。したがって、マトリックスを使用してこれを直接行うことはできません。

ただし、この構文は必要に応じて機能するはずです。

div:hover {
    transform: scale(1.5,1.5) rotate(720deg);
    transition: transform 3s;
}
于 2012-12-19T14:39:23.247 に答える