css3で正方形の画像をx回転なしで台形に変換します

Question

背景画像のある正方形の div を台形に変換しようとしています。

Photoshop の「歪み」ツールとほぼ同じ方法で、2D で作成したいと考えています。

基本的に、私が望むのは、正方形の上端を縮小し、それに応じて画像を変形させることだけです。

3D 変換はうまくいくようです:

リーリー

ほとんどのユースケースで機能しますが、すべてではありません。 実際、これは 30 度回転した正方形で、正面/背面から見ると台形に「見えます」が、反対側から見ても 30 度回転した正方形です。

私が望むのは、真の台形を取得することです。正方形の画像を 2D で歪ませて、回転を伴わずに実際に形状と画像が変化するようにしたいと考えています。

これを試してみましたが、形状 (台形) に関しては機能します:

リーリー

しかし、赤い領域を歪んだ背景画像に置き換えることはできません。これでは私の目的が果たせません。 私が試みることはすべて、画像を歪みのない状態に保つことです。

私が望むことを実現するためのcss/html5/javascriptのトリックはありますか?

＃＃＃ありがとう。

Answer 1

擬似要素に 3D 変換を適用し (background-image を設定することもできます)、元の平面 (その親要素) 。つまり、3D で何かを回転させたい場合は、親オブジェクトを回転する必要があります。

ステップ #1: 正方形 div を作成し、まったく同じ寸法のダミー変数 (またはサブ変数) を追加し、そのダミー変数に background を設定します。画像＃＃＃。 リーリー

ステップ #2: ダミー値の transform-origin を下端の中央 (100% 50%) に設定します。これにより、 3D バックの下端が所定の位置に変形されたままであることを確認します。

ステップ #3: z 軸に沿って 3D ベベルを適用し、y 軸に沿ってエッジを延長します。

はい、CSS には 3D 傾斜機能がありません。しかし、

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< /em> 軸、y 軸 (前後の傾き) は、サンプル点の元の位置 (灰色) と最終位置 (黒色) を通過します。これらの平行線を描くと、直角三角形が作成されます。これらの場合、y 座標上の #xx 変位は傾斜角の正接です。

さて、マトリックスに戻りますと、次のようになります。

リーリー

matrix3d()

値を取得するには、4x4 単位行列と同じ行と列をもう 1 つ追加し、値の列を次のようにリストします。列 ( は ではありません、行ごとに!)。これまでのところ: リーリー 歪んだビュー (上部/さらに奥が小さくなる) を取得するために

perspective

も追加したことに注意してください。 これまでのコードは、上の gif に表示されているもののフラット化されたバージョンを提供します。私が平坦化バージョンと言ったのは、ここで説明している限り、擬似オブジェクトは常にその親の平面上で平坦化されているからです。

親

div

に 3D 変換がない場合、正面から見ると、擬似的に平坦な外観になります。 親

div

に 3D 変換がある場合、デフォルトの transform-style 値が flat であるため、その 3D 変換ダミー値はその平面に平坦化されます。 。これは、3D 変換親の 3D 変換子/疑似オブジェクトが親平面内で平坦化されることを意味します。これは、div の transform-style を preserve-3d に設定すると変更できます。しかし、私たちはそれを望んでいません。

ステップ 4

: 上端をピンで固定します。 まだ正しく見えない点がもう 1 つあります:

transform

上端が元の端の下にあります。 これは、

視点

とそれがどのように機能するかを設定したためです。デフォルトでは、perspective-origin は、水平方向 50% で、設定した要素 (この場合は div) の中央で消滅します。 、垂直方向は 50% です。 3D 傾斜擬似値全体がそこにあるため、スクリーン面の背後の点のみを考慮しましょう。

デフォルトの

perspective-origin

(50% 50%) を使用し、div の中央にあるスクリーン平面に垂直な線上の点のみを使用します。視野角を考慮して、スクリーン平面上の点 (自分のものと同じ X、Y 座標) に投影されます。遠近感が考慮された後、スクリーンに垂直で、div の水平中心線に沿ってスクリーンと交差する平面内の点のみが、その水平中心線に投影されます。 何が起こっているか知っていますか?

perspective-origin

を div の上端の中央 (50% 0) になるように移動すると、その上端に沿って画面に垂直な平面内のポイントになります。は、その上端投影に沿ったものになります。つまり、3D 傾斜擬似オブジェクトの上端は、その親の上端と一致します。 最終的なコードは次のとおりです:

リーリー

これは、結果とその変換前バージョンの ライブ比較ビューです 両方の div が xOy 平面上で平坦であることを示すために 3D で回転されているためです。

---

接線値の処理にプリプロセッサを使用したくないですか? Firefox と Safari はすでにデフォルトで三角関数をサポートしており、Chrome 111 は chrome://flags の Experimental Web Platform features フラグを有効にすることで三角関数をサポートします。

Chromium のサポートを待ちたくないですか?そこでは接線の計算を使用する必要さえありません。任意の正の数値を使用できます。数値が大きいほど、上端は小さくなります。タンジェント値がどこから来るのかを示すためにタンジェント値を使用していますが、そうする必要はありません。接線は、0° から 90° までの角度に対して計算されます。これにより、0 から Infinity までの正接値が得られます。したがって、行列には​​あらゆる正の数を含めることができます。