CSS 変換を使用して不規則な正方形を作成する方法-CSSチュートリアル-php.cn

CSS 変換を使用して不規則な正方形を作成する方法

Barbara Streisand

リリース： 2024-11-04 14:57:30

オリジナル

905 人が閲覧しました

How to Create Irregular Square Shapes Using CSS Transformations?

CSS を使用した不規則な正方形の形状の作成

CSS を使用して、提供された画像に描かれている独特の形状を実現するには、回転と透視変換の組み合わせを使用します。採用されている。次のコードスニペットは、その方法を示しています。

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

ログイン後にコピー

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

ログイン後にコピー

説明:

perspective(180px): 3D パースペクティブを作成し、次のような錯覚を与えます。 Depth.
rotateX(15deg): X 軸を中心にボックスを 15 度回転します。
rotateY(20deg): Y 軸を中心にボックスを 20 度回転します。
rotateZ(-3deg): Z 軸を中心にボックスを反時計回りに 3 度回転します。

これらの変換を組み合わせることで、正方形の形状が歪んで傾き、図に示すような不規則な形状になります。参考画像

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