CSS Transform を使用して要素の両方の角を傾けるにはどうすればよいですか?

CSS Transform を使用して両方の角を斜めにする

質問:

CSS の Transform プロパティを利用して斜め効果を実現するにはどうすればよいですか?次の画像に描かれていますか？目標は、上隅と下隅の両方を傾けることです。

[画像の挿入: https://i.sstatic.net/KNLE4.jpg]

答え:

目的のスキュー効果を実現するには、次の CSS 変換を利用します。

transform: perspective( 600px ) rotateY( 45deg );

この変換を、次のような特定のクラスの HTML 要素に適用します。

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

次に、歪んだ形状をレンダリングするための対応するクラスを使用して HTML 要素を作成します:

<div class="box red"></div>

以上がCSS Transform を使用して要素の両方の角を傾けるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。