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

ソース：php.cn

前の記事：CSS の「div p」セレクターと「div ~ p」セレクターの違いは何ですか? 次の記事：Div と Tables: Web レイアウトでそれぞれを選択する必要があるのはどのような場合ですか?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

2

1725

Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

10

1882

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

1594

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

1508

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1546

関連トピック

詳細>

• コンピューターの電源を入れた後、モニターに信号が表示されない
• クラウド オペレーティング システムとは何ですか?
• Windowsのロック画面のショートカットキー
• ビットコインの入手方法
• JSコードで301ジャンプメソッドを実装する
• delete ステートメントの使用法
• mysqlパスワードを忘れた場合
• ISPチップ