CSS 変換による歪んだ効果の作成

Web デザインの領域では、CSS 変換は空間内の要素を操作するための強力なツールとなります。達成できる興味深い効果の 1 つは、要素に傾いた、または歪んだ外観を与える傾斜です。

CSS 変換でコーナーの傾斜を実現する

疑問が生じます。どうすればよいですか。提供された例のような、両方の角が傾いた斜めの効果を作成しますか?

回答:

この効果を実現するには、transform プロパティを組み合わせて利用できます。遠近法と回転Y。以下に例を示します:

.red.box {
  background-color: red;
  transform: perspective(600px) rotateY(45deg);
}

説明:

• パースペクティブを定義します。変換の消失点を使用して、3D 効果を作成します。値を大きくすると、より長い距離がシミュレートされます。
• rotateY: Y 軸に沿って要素を回転させ、斜めの外観を与えます。正の値を指定すると時計回りに回転し、その逆も同様です。

これらのプロパティを組み合わせることで、サンプル画像に示すように、要素の両方の角を変形する傾斜効果を作成できます。