問題タブ [webkit-perspective]
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.
css - -webkit-perspective の背後にある計算は何ですか?
答えが見つからない「単純な」質問 --webkit-perspective実際に数学的には何をしますか? （私はそれが持っている効果を知っています、それは基本的に焦点距離コントロールのように機能します）例えばどういう-webkit-perspective: 500意味ですか?!?
とりわけ、移動したものの画面上の場所を見つける必要があります。-webkit-perspective
css - JavaScript を使用して CSS タグの値を動的に変更する方法
パースペクティブ ベースの回転: Webkit を使用して CSS3 で回転させたい div があります。jqueryのusermouse downイベントの後にdivが回転します
そのためにキーフレームを使用します
私の質問は、Webkit パースペクティブも適用して 3D のビューを提供し、パースペクティブ X 角度を 45 度に維持して div を回転させる必要があることです...どうすれば可能ですか?
css - ハードウェア アクセラレーションの可用性を確認していますか? （試験あり）
-webkit-transform、-webkit-perspective などを使用する CSS を作成しました。私の設計は、ハードウェア アクセラレーションが利用できるマシンでは問題ないように見えますが、そうでない場合は実際には使用できません。ハードウェア アクセラレーションの可用性を確認し、代替 CSS を提供するにはどうすればよいですか?
補足: chrome://gpu-internals/ を実行して、可用性を手動で確認してください。
css - 変換されたdivの絶対位置を計算する方法
divで使用するtransformと、絶対配置が期待どおりに機能しなくなり、手動で計算する必要があるようです。たとえば、div をコンテナーの下部に配置する場合は、次のようにします。
ただし、この div を変換する-webkit-transform:rotateX(angle);と、コンテナーの下部にはなりません。コンテナの中間の場所は、そのサイズによって異なります。
これを説明するために jsfiddle を作成し、達成しようとしていることも示します: http://jsfiddle.net/9NHJt/
私が使用するコードは次のとおりです。
それで、javascriptなしでこれを修正する方法はありますか? または、jsで正しいボトム位置を計算する方法は?
css - Opera 12.16 では CSS 3D 変換を使用できません
私の古い XP システムの NVIDIA Quadro FX 1500 グラフィック アダプタはかなり古く、サポートされている Chrome HW のリストにないようです。ただし、これを使用して、Chromeで3d変換を有効にすることができました：
- アドレスバーで chrome://flags/ に移動します
- ソフトウェア レンダリング リストをオーバーライド -> 有効化
現在、Opera 12.16 で 3d css を有効にする同様のトリックを探しています。
テストは次のページで行われます: http://jsfiddle.net/amustill/Qh8YV/シンプルな 3D 回転 div を表示します。このテストは、FF、Safari、Chrome では成功しますが、Opera では失敗します。
この単純なテストと同様の結果:
div は Opera では回転していません。
Opera のエラー コンソールで、次のメッセージを見つけました。
クロム、ファイアフォックス:
オペラ：
質問:
- Opera は 3D 変換をサポートしていますか?
- はいの場合: 問題は何でしょうか? 古いハードウェア?、コード?
- 回避策はありますか?
css - パースペクティブは、個々の要素に割り当てられたときに兄弟要素に適用されます
ホバー時にそれぞれ同じ 3d 効果を持つ 4 つのボタンを持つメニューを作成しようとしていますが、パースペクティブは個々の要素ではなく親要素に適用されているようです。
これがどのように見えるかです：
最初の要素は実際にホバーされています (スクリーンショットからカーソルが削除されました)。
HTML:
CSS:
div ラッパーを削除して、パースペクティブを直接 li に適用すると、同じ問題が発生します。パースペクティブをまったく使用しないと、回転が小さくても効果が得られ、カーソルがli要素の右50％を超えると、ホバー状態から何も変化しません（カーソルポインターと同様に効果が変化します）。
私は何を間違っていますか？
camera - Three.js: 後処理シェーダー (EffectsComposer) を使用すると、CSS レンダラーのオーバーレイが機能しない
次のように、まったく同じサイズの 2 つのレンダラーを重ね合わせて、同じパース ビュー カメラを共有するシーンがあります。
CSS オブジェクトは、その位置を参照して CSS オブジェクトの位置を設定するだけで、WebGL シーン内のオブジェクトの上に直接配置できます。
ただし、この効果を追加すると:
そして、コンポーザーを呼び出して、代わりにこのようにレンダリングしますcomposer.render();
CSS オブジェクトが正しく配置されなくなりました。
WebGL オブジェクトがその位置を保持している間、ズームすると CSS オブジェクトがスライドするため、パースペクティブはオフになります。
余分なシェーダー パスが WebGL レンダリングのパースペクティブを変更し、CSS オブジェクトが適切に整列されずにスライドする理由は何ですか?