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

CSS での不規則な正方形の作成

CSS で不規則な形状を作成するのは難しい作業ですが、不可能ではありません。 CSS 変換を適切に組み合わせることで、ユニークで目を引くデザインを作成できます。この記事では、CSS を使用して不規則な正方形を作成する方法を説明します。

問題:

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

[不規則な正方形の画像]

解決策:

不規則な正方形を作成するには、次の CSS コードを使用できます:

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

パースペクティブ プロパティは、変換が適用される 3D 空間を作成します。 rotateX、rotateY、および rotateZ プロパティは、それぞれ x、y、z 軸を中心に要素を回転します。

これらの変換の使用を使用すると、傾いて回転しているように見える不規則な正方形を作成できます。 rotateX、rotateY、および rotateZ プロパティの値を調整して、さまざまな方向と角度を作成できます。

HTML 構造:

このコードを使用するには、

<code class="html"><div class="box">
</div></code>