Webkit CSSローテーション回転しない

Question

CSSトランジションを使用してWebkitでアイテムを360度回転させるのが難しいです。

私は私がやろうとしているかを示すためにJSフィドルを作成しました：http://jsfiddle.net/russelluresti/PnTk8/2/

移行は2つの段階で起こるはず。まず、アイテムはY軸に沿って1/2回転だけ回転します。その後、そのトランジションが完了すると、反対方向を1回転させ、元のサイズの1/2にスケールダウンする必要があります。私が抱えている問題は、rotateY(-360deg)とrotateY(0deg)の回転値がフルローテーションを起こさなければならないにもかかわらず、2番目のトランジションがスケーリングだけで回転していないことです。

これは単なる実証的な概念なので、私は現時点ではWebkitをターゲットにしています。しかし、キーフレームのアニメーションではなく、トランジションに固執したいと思います。何か案は？

Answer 1

私の知るところでは、rotateY（-180deg）からrotateY（-360deg）までの回転はrotateY（0）と同じ状態になります。このようにしてみましょう：同じ方向に2枚の紙を裏返すと、最初と全く同じ状態になると想像してください。結果として、ブラウザは「全く変化しない」ためにブラウザを取得します。したがって、回転時に遷移はありません。

他の例では、これをさらに明確にするでしょう：

与えられたdeg。あなたのケースに設定すると、rotateY（-90deg）=> rotateY（-300deg）=> rotateY（60deg）はちょうど同じになり、2番目のトランジションは開始しません。 Becuzは元の状態に対して：rotateY（0）、rotateY（-300deg）はrotateY（60deg）と同じ状態にあります。