問題タブ [translate3d]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
google-chrome - Chrome24css3はホバー時に3Dのちらつきを変換します
Chrome 24に奇妙なバグがあります。長い説明よりも、こちらをご覧ください。
左側でわかるように、問題なくホバリングできますが、右側では、divをホバリングしなくなったため、ちらつきます。
何かアドバイス？
IE10、Firefoxでは正常に動作していますが、Operaでは動作していません。
google-chrome - 3D オブジェクトの Chrome 大規模オブジェクトが消える
これがバグなのか、単にレンダリングの問題と呼ぶ必要があるのか はわかりませんが、面倒です。
3D 変換されたオブジェクトがある場合、その中にスケーリングされたオブジェクトがあり、そのスケーリングされたオブジェクトが特定のサイズを超えると、オブジェクトは消えます。これが私の言いたいことです: http://dabblet.com/gist/4563584 (a にカーソルを合わせて、それが消えるのを待ちます)
私はグーグルでたくさん検索しましたが、役に立ちませんでした。
あなたは思うかもしれません：なぜですか？impress.js スライドショーを作成していて、大きくズームする必要があるため、ハードウェア アクセラレーションに 3D 変換を使用すると、メモリなどを節約するためにオブジェクトが画像としてキャッシュされますが、大きなものはまだ表示されています。完全にズームインするとぼやけてしまいます（小さなサイズでキャッシュされているため）、スケーリングとズームアウトによりその問題は修正されますが、その後消えます...
スケールなしでぼやけたテキストの問題を修正する他の方法は見つかりませんでした。それに関するヘルプも大歓迎です。
- Google Chrome 24.0.1312.52 の使用
- Firefox 16.0.2 は正常に動作しています
css - translate3dZプロパティを機能させることができません
私は使用するためにトレイを使用しています：
XプロパティとYプロパティは正常に機能しますが、Z（300px）は機能しません。これがjfiddleです。私は何が間違っているのですか？Chrome24とCanary25の両方を試しました。サポートに感謝します...
javascript - Z WebGL で翻訳するには?
私の問題は、関数translateZがコードを停止して機能しないことです。この行がなければ:particals.translateZ(50);コードは機能しますが、Z 軸のパーティカルをこのコードで 50 に変換したいと考えています。
android - translate3d による変換の CSS3 トランジションを停止できません
translate3d: JSFiddleを使用して CSS3 トランジションで要素をアニメーション化しようとしています。
デスクトップの Chrome と Safari では問題ありませんが、Android 4.1.x (SGSII、Galaxy Nexus など) の既定のブラウザーでは、このアプローチは機能しません。移行は停止しません。さらに、この状況は比較的 translate3d にすぎないことに注意してください。translate と position の CSS プロパティ ("top"、"left" など) を使用すると機能します。
javascript - CSS 変換 translate3d 画像アニメーションの奇妙なアンチエイリアシング動作によりジッターが発生する
CSS3 translate3d を使用して左から右にアニメーション化する画像の jsFiddle の例があります: http://jsfiddle.net/Rhx2K/3/
requestAnimationFrame が 60fps をループし、すべてのフレームでサブピクセル間隔で JPG 画像の左位置を設定しています。
例に2つの画像を入れました。どちらも同じことをしていますが、一番上の方が速く動いているだけです。この階段状の効果があることに注目してください。画像自体はサブピクセル レベルで変換されます。画像が一定の速度で移動する様子に注目してください。木が滑るように見えますが、左側と右側が揺れていることがわかります。実験した結果、ピクセルから離れるほどアンチエイリアシングが大きくなることがわかりました。たとえば、左: 1px ではアンチエイリアスはありませんが、左: 1.2px ではいくつかあり、左: 1.5px ではさらに多くあります。左: 1.7px では少なく、2px では何もありません。したがって、ここでのぐらつきは、各サブピクセル ステップでの相対的なアンチエイリアシングによるものです。このジッターを引き起こさなければ、これは理にかなっています。
これは、変換で Webkit トランジションを使用する場合にも発生します。 http://jsfiddle.net/Rhx2K/5/
これは標準的な動作ですか？webkit自体のバグのようです。
ここで見られるように、私の方法は、ピクセル値のみでアニメーション化することでした: http://cmivfx.com/home
ピクセル値 (対サブピクセル値) では、画像にアンチエイリアシングが追加されないため、アニメーションは非常に滑らかに見えます...その点で私が抱えている唯一の問題は、完全なピクセルの増分によって画像の動きが速すぎることです。アニメーションを遅くするには、サブピクセルの増分が必要です。
私はこれらすべてを試しました....
そのどれもが答えではありません。translate3d アニメーションをサブピクセル単位で見栄えよくするにはどうすればよいですか?
javascript - translate3d の絶対値を取得するにはどうすればよいですか?
負の translate3d 値を正の数に変換するにはどうすればよいですか?
例えば：
出力が次のようになるように、値を正の数に変換するにはどうすればよいですか。
safari - bxSlider 項目で CSS 変換を使用すると、Safari でアニメーションが壊れる
bxSlider の最新バージョン (v4.1) にアップグレードするときに、この問題に遭遇しました。新しいバージョンはレスポンシブであるため、プロパティtransformを使用する古い方法 (v3.x で使用) ではなく、スライド間を移動するために使用します。left
ここでデモを作成しました: http://jsfiddle.net/SXZjV/
Safari 5 で表示すると、ブロックにカーソルを合わせても何も起こりません。ただし、-webkit-transform: translate3d(0px, 0px, 0px);インスペクターで無効にすると、アニメーションは正常に機能します。
2 つの変換を調和させる方法はありますか?
どうもありがとう。
Ps 現在 Snow Leopard を実行しているため、Safari 6 でこの動作をまだテストしていません。
d3.js - この d3 コードで私のズームが間違っているのはなぜですか?
このコードは、http: //domtree.breckyunits.comで実際に実行されています。
少しずれている部分はズーム動作です。ポイントを拡大すると、正しくズームされますが、間違ったポイントに変換されます。ある種の変換/変換を同時に行う必要があるように感じますが、これを理解する方法がよくわかりません。線形代数とベクトル/行列の練習はほとんどありません。
作業が必要なコードの部分は再描画関数です。
すべてのコードはhttps://github.com/breck7/domtree/blob/master/domtree.jsで確認できます。
vis はコードの前半で定義されています。