背景画像のある正方形の div を台形に変換しようとしています。
Photoshop の「歪み」ツールとほぼ同じ方法で、2D で作成したいと考えています。
基本的に、私が望むのは、正方形の上端を縮小し、それに応じて画像を変形させることだけです。
3D 変換はうまくいくようです:
リーリーほとんどのユースケースで機能しますが、すべてではありません。 実際、これは 30 度回転した正方形で、正面/背面から見ると台形に「見えます」が、反対側から見ても 30 度回転した正方形です。
私が望むのは、真の台形を取得することです。正方形の画像を 2D で歪ませて、回転を伴わずに実際に形状と画像が変化するようにしたいと考えています。
これを試してみましたが、形状 (台形) に関しては機能します:
リーリーしかし、赤い領域を歪んだ背景画像に置き換えることはできません。これでは私の目的が果たせません。 私が試みることはすべて、画像を歪みのない状態に保つことです。
私が望むことを実現するためのcss/html5/javascriptのトリックはありますか?
＃＃＃ありがとう。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
擬似要素に 3D 変換を適用し (
background-imageを設定することもできます)、元の平面 (その親要素) 。つまり、3D で何かを回転させたい場合は、親オブジェクトを回転する必要があります。ステップ #1: 正方形
divを作成し、まったく同じ寸法のダミー変数 (またはサブ変数) を追加し、そのダミー変数にbackground を設定します。画像＃＃＃。リーリーステップ #2: ダミー値の transform-origin
を下端の中央 (100% 50%) に設定します。これにより、 3D バックの下端が所定の位置に変形されたままであることを確認します。ステップ #3: z
はい、CSS には 3D 傾斜機能がありません。しかし、軸に沿って 3D ベベルを適用し、y軸に沿ってエッジを延長します。matrix3d()
それでは、まずチルトがどのように機能するかを理解しましょう。があり、これを使用してあらゆる回転、拡大縮小、傾き、移動を表現できます。
軸に沿って傾きが発生します。
これは、2D チルト機能がどのように機能するかを示すインタラクティブなデモンストレーション です。
この例を考えてみましょう。x 軸に沿って傾斜しています。y 軸が初期位置から離れるように回転すると、y 軸に沿ったエッジが伸びます。この角度は傾斜角 。 z 軸は傾けている平面 (この場合 xOy) に垂直であり、影響を受けません:
さて、私たちの場合でも同様のことを行いましたが、yOz## に沿っていたため、傾斜は xOy 平面ではなく yOz 平面で発生しました。 # 平面は #xx 軸に沿ってではなく、>z 軸に傾いています。 transform-origin
を使用してダミー値の下端の中央を所定の位置に固定しているため、この傾きはz
上部の水平ガイドラインは、傾斜した疑似値の上部が軸 (画面に垂直) に沿って発生します。基本的に、各点のx と y の座標を維持しながら、z の座標を変更しながら、擬似オブジェクトを画面の奥に引き戻します。 基本的に、親平面に平らにせず(親は輪郭で制限されている)3Dで見るとこんな感じになります。x
およびy 座標をどのように保持しているかを示しており、ちょうど z## に沿っていることがわかります。 ＃軸。 さて、CSS を使用してそれを行うにはどうすればよいでしょうか? 上で述べたように、3D 傾斜はありませんが、変換行列を自分で構築できます。これは
z軸 (3 番目の軸) に沿った傾きと
y軸 (2 番目の軸) に沿ったストレッチであるため、行列内で次と同じものは唯一のものです。 単位行列 (主対角線に沿った 1、他の場所では 0) は 2 列目の行 3 にあります。そこで傾斜角の正接を取得します。 MDN では、
skewX()およびskewY()でもこれを確認できます。これは、傾斜軸に沿ったすべての点が、細長い軸に沿った座標と傾斜角の正接の積によって変位されるためです。軸に平行な線を引くと、最初の図でこれがわかります。この点 (x 軸、y 軸 (前後の傾き) は、サンプル点の元の位置 (灰色) と最終位置 (黒色) を通過します。これらの平行線を描くと、直角三角形が作成されます。これらの場合、y 座標上の #xx 変位は傾斜角の正接です。
さて、マトリックスに戻りますと、次のようになります。リーリー
matrix3d()値を取得するには、
perspective4x4単位行列と同じ行と列をもう 1 つ追加し、値の列を次のようにリストします。列 (はではありません、行ごとに!)。これまでのところ: リーリー ） >歪んだビュー (上部/さらに奥が小さくなる) を取得するためにも追加したことに注意してください。
親
divに 3D 変換がない場合、正面から見ると、擬似的に平坦な外観になります。
divに 3D 変換がある場合、デフォルトの
ステップ 4transform-style値がflatであるため、その 3D 変換ダミー値はその平面に平坦化されます。 。これは、3D 変換親の 3D 変換子/疑似オブジェクトが親平面内で平坦化されることを意味します。これは、div のtransform-styleをpreserve-3dに設定すると変更できます。しかし、私たちはそれを望んでいません。: 上端をピンで固定します。 まだ正しく見えない点がもう 1 つあります:
transform上端が元の端の下にあります。
視点とそれがどのように機能するかを設定したためです。デフォルトでは、
perspective-originは、水平方向50%で、設定した要素 (この場合はdiv) の中央で消滅します。 、垂直方向は50%です。デフォルトの
perspective-origin(
perspective-origin50% 50%) を使用し、divの中央にあるスクリーン平面に垂直な線上の点のみを使用します。視野角を考慮して、スクリーン平面上の点 (自分のものと同じ X、Y 座標) に投影されます。遠近感が考慮された後、スクリーンに垂直で、divの水平中心線に沿ってスクリーンと交差する平面内の点のみが、その水平中心線に投影されます。を div の上端の中央 (
リーリー50% 0) になるように移動すると、その上端に沿って画面に垂直な平面内のポイントになります。は、その上端投影に沿ったものになります。つまり、3D 傾斜擬似オブジェクトの上端は、その親の上端と一致します。これは、結果とその変換前バージョンの ライブ比較ビューです 両方の div が xOy 平面上で平坦であることを示すために 3D で回転されているためです。
接線値の処理にプリプロセッサを使用したくないですか? Firefox と Safari はすでにデフォルトで三角関数をサポートしており、Chrome 111 は
chrome://flagsの Experimental Web Platform features フラグを有効にすることで三角関数をサポートします。Chromium のサポートを待ちたくないですか?そこでは接線の計算を使用する必要さえありません。任意の正の数値を使用できます。数値が大きいほど、上端は小さくなります。タンジェント値がどこから来るのかを示すためにタンジェント値を使用していますが、そうする必要はありません。接線は、
0°から90°までの角度に対して計算されます。これにより、0からInfinityまでの正接値が得られます。したがって、行列にはあらゆる正の数を含めることができます。