問題タブ [translate3d]

人々がセクションをスワイプできる webapp を構築しています。これらのセクションは、ほとんどがリストビューで満たされています。私の現在の設定は次のとおりです。

• on touchmove: 新しい translate3d 値を設定します
• on touchend: セクションのコンテナーがそこにスナップし、rAF を介してアニメーション化する必要がある translate3d 値を計算します。

ただし、スワイプすると、「複合レイヤー」に数十ミリ秒かかるさまざまなポイントが表示されます（約40〜70ミリ秒）。box-shadow などの複雑な計算を回避したので、これを改善するにはどうすればよいでしょうか? 残りの JS の処理は問題ありません。イベントには約 3 ミリ秒かかり、スタイルの再計算にはさらに 3 ミリ秒かかりますが、「複合レイヤー」の大きな塊です。

Z 軸上に要素を配置しようとしていて、それらを並べ替えたいと考えています。例でわかるように、2 番目のセクションは、最初の要素 (ピンク色の背景) の上にあるが、z 軸の値が低い (-2500px) 場合のように見えます。私は何が欠けていますか？

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

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

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

初期状態：

最終状態:

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

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

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

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

私は複数の div をスライドするために Owlcarousel 2 を使用しています。問題は、各「スライドページ」内に絶対として配置されたいくつかの要素があり (どちらも動作していない相対)、アニメーション中に表示されず、単に「ブリック- in」でアニメーションが終了します。

これは私のhtmlがどのように見えるかです

そして、これは私のJSファイルです

スライドインしているときでもすべての要素を表示するにはどうすればよいですか (スライドアウトしているときは機能します)。Owlcarousel 1 で動作していました。

CSS キーフレームでアニメーション化された背景画像の配置に問題があります。現在、左から右にスライドしてから左に戻る大きな横長の画像です。まるでパノラマを見ているか、部屋の中をぐるぐる回っているかのように感じていただければ幸いです。

私の問題は、大きな画面サイズでうまく機能することですが、1280x600 などでは天井のビューしか得られません。従来の背景画像の場合と同じように、背景画像を中央または下からロードするように配置する方法はありますか?

背景画像のコードのサンプルを次に示します。

CodePen リンク

学校のプロジェクトでは、このチュートリアルに従って Pong ゲームを行っています: http://www.sitepoint.com/css3-pong-insane-things-to-do-with-css/

アニメーションの部分で行き詰まっています。ボールは中央に配置されておらず、@keyframes を上下に配置すると、ボールをコート (壁) 内に拘束したいときに、ボールがコート上で上下に跳ね返ります。

ここで写真を見る

ボールをボックス内に留めるにはどうすればよいですか?

ここに私のHTMLがあります:

CSS:

Web サイトでいくつかの雲をアニメートして、ページ上を斜めに移動するようにしています (画面の左上から始まり、画面の右下で終わります)。

これまでのところ、左から右に移動していますが、translate3D を使用してこの方向に移動させる方法がわかりません。私が達成したいことを示すサイトは次のとおりです: http://futurewatercity.com/ (矢印を使用して地図をクリックする必要があります)

ここに私のコードがあります：