CSS で不規則な正方形を作成するにはどうすればよいですか?

CSS で不規則な正方形を作成する

従来の対称性に反する正方形を想像してみませんか? CSS は、画像で示されているような不規則な形状を作成するためのツールを提供します。

その秘密は、主に遠近法、回転 X、回転 Y、および回転 Z などの変換プロパティの賢明な使用にあります。これらのプロパティを使用すると、形状の 3D 方向を操作して、不規則な角度と深さの錯覚を作成できます。

ここに示した例では、CSS コードによって次の変換が行われます。

<code class="css">.box {
  width: 150px;
  height: 120px;
  background: #f540a8;
  margin: 20px;
  transform: perspective(180px) rotateX(15deg) rotateY(20deg) rotateZ(-3deg);
}</code>

• 遠近法: 消失点を確立し、奥行きの錯覚を作成します。
• RotateX: X 軸 (水平) に沿って形状を傾けます。
• RotateY: Y 軸 (垂直) に沿って図形を回転します。
• RotateZ: Z 軸 (ページに垂直) に沿って図形を回転します。

これらの値を試してみることで、幅広い不規則な正方形の形状を実現し、デザインにユニークなタッチを加えることができます。

以上がCSS で不規則な正方形を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。