ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS 変換を使用して不規則な正方形を作成する方法

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

Barbara Streisand
リリース: 2024-11-04 14:57:30
オリジナル
881 人が閲覧しました

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート