0

トグルクラスを使用して、jQueryを使用して要素を垂直に移動しながら、Y軸に沿って回転しています。translate3d() は要素を垂直に移動し、rotateY() は要素を回転させるため、jQuery がクラスを適用していることはわかっています。ただし、次の 2 つの問題があります。

  1. パースペクティブ原点はパースペクティブに影響しません。代わりに、要素は状態の間で奇妙に動揺します。
  2. perspective()は、最終状態で定義され、初期状態から除外されない限り効果がありません... ??

私が使用しているCSSは次のとおりです。

初期状態：

transform:translate3d(0px,-210px,0px) rotateY(-90deg);
perspective-origin: center center;

最終状態:

transform: translate3d(0px,-110px,0px) rotateY(0deg) perspective(100px);
perspective-origin: center center;

うまくいけば、問題を特定するのに十分な情報です。基本的に、アニメーションの視点を制御することはできません。

最初は margin-top の値を変更していましたが、アニメーションのパフォーマンスを向上させるために 3D 変換の使用を開始したいと考えていました。

私は最新の Chrome デスクトップを使用しています。

更新:本質的に問題を示す JSFiddle を作成しました。そこに多くのプレフィックスがあることは知っていますが、それは主に、どのプレフィックスが必要なのかわからないためです。うまくいけば、これで少なくともアイデアが伝わるでしょう。視点は何もしていません。JSFiddle: https://jsfiddle.net/56aq22dc/

4

1 に答える 1

2

変換関数の順序は重要です

それらは右から左に適用されるので、これは

transform:  translate3d(0px,0px,0px) rotateY(45deg) perspective(100px);

要素が回転していないときにパースペクティブを適用するため、表示されません。

そのはず

transform:  perspective(100px) translate3d(0px,-50px,0px) rotateY(45deg);

最初に回転し、次に平行移動してから遠近法を適用します

フィドル

これにより、パースペクティブが適用されます (または、より適切に言えば、適用されたパースペクティブが目立ちます)。ただし、翻訳された要素に適用されるため、中央揃えにはなりません。

中央に配置したい場合は、翻訳の前にパースペクティブを適用します。変換は右から左に評価されることに注意してください。したがって、前はリスト内の後を意味します。

transform: translate3d(0px,-50px,0px) perspective(600px) rotateY(80deg);

パースペクティブをプロパティではなく関数として適用する場合、perspective-origin は役に立たないことに注意してください。

フィドル

于 2015-06-26T21:02:09.913 に答える