CSS で不規則な正方形を作成するには?-CSSチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-11-01 09:07:02

オリジナル

705 人が閲覧しました

How to Create an Irregular Square Shape with 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 構造:

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

を追加するだけです。 class 属性が「box」に設定された要素を HTML ドキュメントに追加します。

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

ログイン後にコピー

結果として得られる正方形の形状は、Web ページ上で不規則な立方体として表示されます。 CSS コードを試して、不規則な正方形のさまざまなバリエーションを作成できます。

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