CSS 描画: シンプルな 3D グラフィックス効果を実現する方法-CSSチュートリアル-php.cn

CSS 描画: シンプルな 3D グラフィックス効果を実現する方法

王林

リリース： 2023-11-21 16:44:02

オリジナル

1083 人が閲覧しました

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