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