CSS を使用して 3D 効果を作成する方法cloud_html/css_WEB-ITnose

はじめに

この記事では、いくつかの高度な属性を使用して、いくつかの 3D 効果雲を作成する方法を段階的に紹介します。さらに詳しく知りたい場合は、ここを参照してください。悪くないスタートだ。

静的レンダリング

このチュートリアルはいくつかの部分に分かれており、各部分には HTML、CSS、JavaScript の動作を理解するための詳細な手順が含まれています。コードの単一セクション。

チュートリアルのコードは最終デモの簡略化されたバージョンですが、主な違いは各部分で説明されています。

1. 新しい世界と視点を作成します
2. 作成した世界にオブジェクトを追加します
4. 3D 効果を実行します
5.新しいワールドと視点を作成します
まず、ビューポートとワールドという 2 つの div 要素が必要です。残りの部分は後で動的に追加されます。
ビューポートには画面全体とカメラが含まれます。 CSS の 3D 変換ではカメラ自体が存在しないため、透明なガラススクリーンを通して視野を見ていることを前提とし、視野の方向を変更することもできます。すべてのオブジェクトをそこに配置して変換します。

world は、すべてのオブジェクトを修正するために使用される div ボックスです。 回転、変形、拡大縮小すると、すべての要素が変形します。

簡単にするために、CSS プロパティのプレフィックスは使用しませんが、ブラウザーのプレフィックス (-webkit、-moz、-0、-ms など) を使用します

。

これが必要なボックス モデルのすべてです:

<div id="viewport">    <div id = "world" ></div></div>

以下は、定義した 2 つの CSS スタイルです。ここで、ワールド div をビューポート div 内に配置することが非常に重要です。そうしないと、シーンがレンダリングされません。他の 2D 要素と同様に、ドキュメント内に配置された要素も回転することに注意してください。 そうだね 次に、オブジェクトを初期化し、mousemove イベントをバインドし、updateView() 関数を定義するコードを記述します。

#viewport{    bottom:0;    left:0;    overflow:hidden;    perspective:400;    position:absolute;    right:0;    top:0;}#world{    height: 512px;    left: 50%;    margin-left: -256px;    margin-top: -256px;    position: absolute;    top: 50%;    transform-style: preserve-3d;    width: 512px;}

世界は赤で、ビューポートには空をシミュレートする背景色があり、マウスホイール イベントはカメラの距離を監視するために使用されます。マウスを移動して、赤い div の方向がどのように変化するかを確認します。

この部分のデモリンクはこちらです

2. 作成した世界にオブジェクトを追加します

次に、実際の 3D コンテンツを追加します。新しい div をいくつか追加し、ワールド空間に配置します。絶対に配置されたいくつかの div をワールドの子として追加する必要がありますが、デフォルトでワールドの中心に表示される左と上の代わりに 3D 変換を使用します。これらの新しいコンテナは実際のクラウドが配置されるレイヤーであるため、幅と高さのプロパティは重要ではありません。正式なアプリケーションの場合は、(margin-left プロパティと margin-top プロパティを幅と高さの負の値の半分に設定することにより) 中央に配置するのが最善です。

すごい

世界を具体化するために、generate() メソッドと createCloud() メソッドを追加します。

random_{var} は実際の変数値ではなく、指定された範囲内の乱数を返すコード プレースホルダーであることに注意してください

。

/*    Defining our variables    world and viewport are DOM elements,    worldXAngle and worldYAngle are floats that hold the world rotations,    d is an int that defines the distance of the world from the camera */var world = document.getElementById( 'world' ),    viewport = document.getElementById( 'viewport' ),    worldXAngle = 0,    worldYAngle = 0,    d = 0;/*    Event listener to transform mouse position into angles     from -180 to 180 degress, both vertically and horizontally*/window.addEventListener( 'mousemove', function( e ) {    worldYAngle = -( .5 - ( e.clientX / window.innerWidth ) ) * 180;    worldXAngle = ( .5 - ( e.clientY / window.innerHeight ) ) * 180;    updateView();} );/*    Changes the transform property of world to be    translated in the Z axis by d pixels,    rotated in the X axis by worldXAngle degrees and    rotated in the Y axis by worldYAngle degrees.*/function updateView() {    world.style.transform = 'translateZ( ' + d + 'px ) \    rotateX( ' + worldXAngle + 'deg) \    rotateY( ' + worldYAngle + 'deg)';}

ページ上のピンク色の四角いレイヤーは、viewport.style.perspective の値をより簡単に変更するための p 変数があります。この変数を変更して、カメラがどのように変化するかを確認してください。この値が大きいほど、視野角はより垂直になります。

randowm_{var} は実際の変数ではないことをもう一度思い出してください。

クリックしてデモのこの部分をご覧ください

3. オブジェクトにレイヤーを追加します ここで興味深いことが起こり始めます。雲を表すために絶対に配置されたいくつかの「雲レイヤー」div ボックスを追加します。雲のテクスチャを保持するために使用されます。

.cloudBase {    height: 20px;    left: 256px;    margin-left: -10px;    margin-top: -10px;    position: absolute;    top: 256px;    width: 20px;}

古い createCloud() 関数が少し変更され、クラウド層に乱数が追加されました。

/*    objects is an array of cloud bases    layers is an array of cloud layers*/    var objects = [],    layers = [];/*    Clears the DOM of previous clouds bases     and generates a new set of cloud bases*/    function generate() {        objects = [];        layers = [];        if ( world.hasChildNodes() ) {            while ( world.childNodes.length >= 1 ) {                world.removeChild( world.firstChild );               }         }        for( var j = 0; j <; 5; j++ ) {            objects.push( createCloud() );        }    }/*    Creates a single cloud base: a div in world    that is translated randomly into world space.    Each axis goes from -256 to 256 pixels.*/    function createCloud() {        var div = document.createElement( 'div'  );        div.className = 'cloudBase';        var t = 'translateX( ' + random_x + 'px ) \        translateY( ' + random_y + 'px ) \        translateZ( ' + random_z + 'px )';        div.style.transform = t;        world.appendChild( div );        return div;    }

クリックしてデモの 3 番目の部分をご覧ください

雲は、少し白いエッジが付いた青い部分で、かなり層になっているように見えます。マウスを移動して、各レイヤーがどのように配置され、回転するかを確認します。

4. 3D 効果を実行してみます

次のステップは奇跡を目撃することです! layers[] を使用して、世界の個々のクラウド レイヤーの参照を作成します。 worldXangle と worldYAngle を使用して、空間全体の選択変換を表します。

各レイヤーを逆回転に設定すると、ビューポート内でレイヤーのサイズが変更されます。ビルボードができました。最初にワールドを X 方向に回転させ、次に Y 方向に回転させるため、最初に Y 方向に、次に X 方向に各レイヤーを逆の順序で回転する必要があります。変換の順序は非常に重要です。順序を正しく設定しないと、要素の方向が間違ってしまいます。

.cloudLayer {    height: 256px;    left: 50%;    margin-left: -128px;    margin-top: -128px;    position: absolute;    top: 50%;    width: 256px;}

マウスを前後に動かすと、青い雲が垂直になっていることがわかります (常にカメラの方向を向いています)。ただし、世界と他の雲のベースは 3D 空間内のオブジェクトのままです。

クリックして魔法の効果を目撃してください

最終的なまとめ

最終的な効果を実現するには、デバッグに使用した色を削除し、雲レイヤー div に雲の画像を img とともに貼り付けるだけです。 画像はアルファチャンネル付きの PNG 形式である必要があることに注意してください。そうでない場合は効果がありません。

クリックして最終的な効果を確認してください

クリックして最終バージョンを確認してください

もちろん、煙の跡、プラズマ雲、緑の葉、空飛ぶパン製造機など、他の写真も変更できます。背景画像を変更するだけです。異なる割合のテクスチャ素材を混合すると、魔法のような効果が得られます。

要素をランダムに追加することは問題ありませんが、木、アヒルの形をした雲、複雑なビッグバンなどの規則正しい構造を作成することもできます。 3D 曲線を試したり、固定された雲の軌道を作成したり、3D 雲の形状を推測するマルチプレイヤー ゲームを作成したりすることができます。可能性は無限です。

注: 記事内のコードはすべて簡略化されており、段階的に練習したい場合は、サンプルエフェクトのリンクページを保存してソースコードを表示することをお勧めします。

この記事は https://www.clicktorelease.com/blog/how-to-make-clouds-with-css-3d# から翻訳されたものです。3D などの専門用語の翻訳に誤りがある場合はご容赦ください。視点を変えて、修正を歓迎します。