2

CSSトランジションを使用してWebkitでアイテムを360度完全に回転させるのに問題があります。

私がやろうとしていることを示すためにJSFiddleを作成しました：http：//jsfiddle.net/russelluresti/PnTk8/2/

移行は2つのステップで行う必要があります。まず、アイテムはY軸に沿って1/2回転する必要があります。次に、その遷移が完了すると、反対方向に1回転して、元のサイズの1/2に縮小する必要があります。私が抱えている問題は、2番目の遷移はスケーリングのみであり、回転は行わないことです。ただし、の値を回転するrotateY(-360deg)とrotateY(0deg)、完全に回転するはずです。

これは概念実証にすぎないため、現時点ではWebkitのみを対象としています。ただし、キーフレームアニメーションではなく、トランジションに固執したいと思います。何か案は？

4

1 に答える 1

1

私の知る限り、rotateY（-180deg）からrotateY（-360deg）へのrotateはrotateY（0）と同じ状態になります。このように言いましょう。一枚の紙を同じ方向に2回ひっくり返すと、最初とまったく同じ状態になると想像してください。その結果、ブラウザは「まったく変更なし」と見なし、回転時に遷移しません。

別の例では、これをさらに明確にします。

与えられた度 あなたのケースに設定すると、rotateY（-90deg）=> rotateY（-300deg）=> rotateY（60deg）はまったく同じように機能し、2番目の遷移は開始されません。元の状態を基準にすると、rotateY（0）、rotateY（-300deg）はrotateY（60deg）と同じ状態になります。

于 2012-04-30T18:35:35.760 に答える