0

次の CSS コードを使用して、HTML 要素の Z 軸に単純なアニメーションを作成しようとしています。

-webkit-transition: -webkit-transform 1000ms ease 500ms;
-webkit-transform: perspective(100px) translate3d(0px, 0px, -20px);

問題は、アニメーションが Z 軸に対して実行されないことです (アニメーションが終了するはずのときに突然ジャンプするだけです)。Xなどの軸を切り替えると、アニメーションが正しく実行されます。

編集:軸を混在させると、アニメーションは X 軸と Y 軸に対してのみ実行され、アニメーションが終了すると、要素は Z 軸上の正しい位置に移動します (突然のジャンプ)。

同じ CSS コードを FireFox で (ベンダー プレフィックスなしで) 使用すると正しく機能し、要素は Z を含むすべての軸でアニメーション化されます。

これは Chrome 固有の問題ですか、それとも変換要素を間違って使用していますか?

Edit2：サンプルコードでJSFiddleを作成しました（リンク）

4

1 に答える 1

0

パースペクティブは別のものであり、変換の一部ではありません。

-webkit-transform: perspective(100px) translate3d(0px, 0px, -20px);

次のようにする必要があります。

-webkit-perspective: 100px;
-webkit-transform: translate3d(0px, 0px, -20px);

また、要素を囲む何かの遠近法を定義する必要があります。

あなたの要素を という要素で囲み、#stage代わりにその上にパースペクティブを設定しました。

http://jsfiddle.net/xpR2n/2/

何をすべきかを示します。

于 2013-04-07T10:18:31.937 に答える