ホームページ > 記事 > ウェブフロントエンド > CSS 描画: シンプルな 3D グラフィックス効果を実現する方法
CSS 描画: シンプルな 3D グラフィック効果を実現する方法
現代の Web デザインでは、ページにダイナミックさと 3 次元性を追加するために、多くの場合 3D グラフィックスが必要になります。 。 効果。以前は 3D 効果を実現するには JavaScript または専門的な 3D エンジンを使用する必要がありましたが、現在では CSS はいくつかの単純な 3D グラフィック効果を実現するのに十分強力です。この記事では、CSS を使用して簡単な 3D グラフィックを描画する方法と、具体的なコード例を紹介します。
単純な立方体を描画するには、CSS のtransformプロパティを使用できます。まず、6 つの辺を持つ要素が必要です。div 要素を使用して、その幅と高さを同じ値に設定します。次に、CSS 変換プロパティを使用して要素を回転、拡大縮小、移動し、3D 効果を実現します。
以下は、キューブの簡単な CSS サンプル コードです:
<style> .cube { width: 200px; height: 200px; position: relative; transform-style: preserve-3d; transform: rotateX(45deg) rotateY(45deg); } .face { position: absolute; width: 200px; height: 200px; opacity: 0.8; } .front { background-color: red; transform: translateZ(100px); } .back { background-color: green; transform: translateZ(-100px) rotateY(180deg); } .top { background-color: blue; transform: translateY(-100px) rotateX(90deg); } .bottom { background-color: yellow; transform: translateY(100px) rotateX(-90deg); } .left { background-color: orange; transform: translateX(-100px) rotateY(-90deg); } .right { background-color: purple; transform: translateX(100px) rotateY(90deg); } </style> <div class="cube"> <div class="face front"></div> <div class="face back"></div> <div class="face top"></div> <div class="face bottom"></div> <div class="face left"></div> <div class="face right"></div> </div>
上記のコードでは、キューブのコンテナとしてクラス cube を持つ要素を定義し、CSS 変換属性を使用します。回転角度を設定します。同時に、クラスフェイスを持つ要素も立方体の各面として定義され、面ごとに異なる背景色が設定されます。
単純な円柱を描画するには、CSS の擬似要素とグラデーションを使用できます。まず、円形の底を持つコンテナが必要で、コンテナ内に 2 つの疑似要素 (側面を表す 1 つと上部を表す 1 つ) を作成します。次に、CSS 変換プロパティを使用してコンテナを回転および移動し、3D 効果を実現します。
以下は、シリンダーの簡単な CSS サンプル コードです。
<style> .cylinder { position: relative; width: 200px; height: 300px; transform-style: preserve-3d; transform: rotateX(60deg) rotateY(30deg); } .cylinder::before, .cylinder::after { content: ''; position: absolute; width: 200px; height: 200px; background: linear-gradient(to bottom, #ff5f5f, #ff2929); border-radius: 50%; opacity: 0.8; } .cylinder::before { transform: translateZ(-100px); top: 50px; } .cylinder::after { transform: translateZ(100px); bottom: 50px; } </style> <div class="cylinder"></div>
上記のコードでは、クラスシリンダーを持つ要素をシリンダーのコンテナーとして定義し、CSS 変換プロパティを使用して、回転角度を設定します。 ::before および ::after 疑似要素を使用して、円柱の側面と上面をそれぞれ作成し、CSS の linear-gradient
プロパティを使用してグラデーションの背景色を設定します。
概要
CSS のTransform プロパティを使用すると、立方体や円柱などの単純な 3D グラフィック効果を簡単に実現できます。これらの効果は、ページに立体感を加えるだけでなく、ユーザー エクスペリエンスも向上させます。この記事で提供されているコード例がお役に立てば幸いです。ご質問がございましたら、お気軽にメッセージを残してください。
以上がCSS 描画: シンプルな 3D グラフィックス効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。