問題タブ [css-transforms]

iOS デバイスの iPad と iPhone、および CSS 変換のハードウェア アクセラレーションを利用できる Webkit を使用する Android デバイスで Javascript カルーセルをスムーズに動作するように変換したいと考えています。

位置とサイズの設定を可能にするライブラリまたはコードのスニペットは既にありますか?

私はjquery.animate-enhancedを見つけましたが、これは近いかもしれませんが、アニメーションが必要であり、機能検出も行います.もっと簡単なことをしたいのですが、それよりもはるかに複雑に見えます.

このソリューションで対処する必要があると思われる複雑な問題がいくつかあります。

-コードを単純に再利用して、top/ leftCSS 属性または翻訳付きの CSS 変換 (およびそれらを変換するために必要な再計算) を使用する

-幅と高さを設定する代わりにスケール変換を使用する

次のようなセットアップ手順:

--webkit-transform-styleに設定preserve-3d

--webkit-transform-origin必要に応じて設定する (そして何をする?)

CSS3 アニメーションを使用して div を拡大しようとしています。ただし、divの上部をそのままにしておきたいです。したがって、divの下部のみを拡大したいと思います。どうすればいいですか？

私background-attachment:fixedはうまくいっています。しかし、CSS3をその DIV で回転させて下にスクロールすると、background-attachment:fixed動作が停止します。

これをチェックしてくださいhttp://jsfiddle.net/P3jS4/

現在、私はchrome18に取り組んでいます。

回転 css を削除すると、background-attachment:fixed が正常に機能します。

http://jsfiddle.net/P3jS4/2

機能検出には Modernizr を使用し、CSS3D プロパティのアニメーション化には TransformJS を使用しています。TransformJS は、translate、scale、rotate プロパティのスタイリングに CSS マトリックスを使用します。filter プロパティを介してマトリックス変換をサポートしているため、IE でも問題なく動作します。

私の問題は、Opera Presto 2.5 以降、Opera が CSS マトリックスのみをサポートしていることです。これは現在アルファ/ベータ版のようです。ブラウザが CSS マトリックス変換に対応しているかどうかを検出する方法はありますか?

どんな助けでも親切にいただければ幸いです。:)

編集:わかりました、私は間違っていました :) Opera は CSS マトリックスをサポートしていますが、値は単位なしでなければなりません。それでも、それをテストすることは興味深いでしょう。

どちらも要素を現在の位置から動かすことができたようです。これらの2つの方法は互換性がありますか？

css3 の実験で 10,000 個の小さな div 要素をブラウザー ビューポートの上部から下部に移動しています。このテストでは、2 つの異なるアプローチを使用します。

1. translate3D(x, y, z)またはを使用した GPU アクセラレーションtranslateZ(0)
2. topcss のプロパティを調整するだけで GPU アクセラレーションなし

ハードウェア アクセラレーションを使用しない場合、Google Chrome ではかなりスムーズに動作します。

ハードウェア アクセラレーションを有効にすると、パフォーマンスが大幅に低下します。ボックスが均等に広がっていないのはとても残念です。

GPU/ハードウェア アクセラレーションの場合:

GPU/ハードウェア アクセラレーションなし:

質問

どうしてこんなことに？GPU を使用するとパフォーマンスが向上しますか?

デモ申し込み

https://www.timo-ernst.net/misc/hwtest/

ソース

https://github.com/valnub/hwtest

テストに使用したハードウェア

• Apple Macbook Pro 15インチ 2015年モデル
• CPU 2.8 GHz インテル Core i7
• 16GBのRAM
• macOS ビッグサー 11.2

更新(2014-11-13): この質問はまだ注目を集めているため、問題自体はまだ存在しているように見えることを指摘したいと思いますが、最新のハードウェアで提供されているデモでは、前述の吃音は表示されない可能性があります。古いデバイスでは、依然としてパフォーマンスの問題が発生する可能性があります。

*更新 II (2021-02-17): 問題は引き続き発生しますが、使用するハードウェアに基づいて、デモで移動するボックスの数を増やす必要があります。デモ アプリの UI を変更したので、移動するボックスの数を調整して、特定のハードウェアのスタッター アニメーションを作成できるようになりました。この問題を再現するには、GPU/ハードウェア アクセラレーションを有効にしてスタッターを確認するのに十分な数のボックスを作成することをお勧めします。次に、ボックスにチェックマークを付けて、加速せずにテストを再度実行します。アニメーションはよりスムーズになるはずです。

オンラインで検索していくつかの資料を見つけましたが、少なくとも私にとっては、この概念を明確に示したものはありませんでした。たとえば、w3schoolsは、ビューから3D要素を配置するピクセル数を定義すると述べています。完全に理解するのはとても抽象的です。誰かがもっと鮮やかでわかりやすい方法で教えてもらえますか？このコンセプトを示す画像があれば、これ以上のことはありません。

線をリングに変えることは、GIMPなどのグラフィックプログラムでは簡単な作業です。

_{（出典：adamhaskell.net）}

CSSで同じ効果を生み出すことが可能かどうかを調べようとしています。

だから私は次のことを考えました：

• 上記のアルゴリズムは、にマップさxれrます。yθ
• これを行うには、画像の幅を使用してx、の範囲にスケーリングします[0,w/2]w
• また、yの範囲にスケーリングされます[0,2π]
• 極座標をデカルトに戻すには：xc = rp*cos(θp)およびyc = rp*sin(θp)
• 次に、原点が画像の中央になるように結果が変換されます。
• だから私たちは持っています：

これはすべて問題なくダンディですが、CSSでこのような変換を作成するにはどうすればよいですか？おそらく、どのキーワードも役に立たないので、行列変換である必要があります。さて、私は上記の2つの方程式から行列を作成する方法、ましてやCSS変換でそれを表現する方法がわかりません。

誰かがこの最後のステップで私を助けることができますか？

ここで問題のフィドルを作成しましたhttp://jsfiddle.net/aakashgoel/ZcF4N/

3D レンダリングは Mozilla Firefox では正常に動作しますが、Google Chrome では失敗します。そこで使用されているプロパティのうち、Chrome でサポートされていないものはどれですか?

編集：期待される結果：ボックス「1」をクリックして反転させます。青色の背景を持つ 2 に変更する必要があります。

編集：これはクロムが出力するものです：

パースペクティブを使用してCSS変換を適用しようとすると、divの上半分が選択できないという奇妙な不具合が発生します。ここjsfiddleで簡単なデモを作成しました

[赤いボックスの一番上の選択はクリック可能である必要があります]

誰かがこれを修正する方法を知っていますか？私は他の同様のエラーを見てきましたが、それらの解決策はここでは機能していないようです。

乾杯