CSS3 3D 効果の最初の紹介、 Understanding_html/css_WEB-ITnose についての簡単な説明

CSS3 の 3D 変換に触れたばかりですが、本当に素晴らしく感じたので、その興奮を利用して自分の考えと理解を記録しました。何か間違っている場合は、修正してください。

CSS3 には 2D と 3D の 2 つの変形方法が用意されており、いわゆる変形は主に変位と回転です。2D と 3D の違いはおそらく Z 軸方向の変形があるかどうかだけです。

それでは、後で 3D 変換をよりよく理解するために、最初に 2D 変換について話しましょう。

translate() とrotate()

上記の 2 つのメソッドは 2D 変換の一般的なメソッドであり、もちろん他にもありますが、ここでは説明しません。まずはこの２つ。具体的な構文は次のようになります。たとえば、div を変換したいとします。

#div1{transform:translate(100px,100px);}

#div2{transform:rotate(50deg);}

Transform は CSS3 によって提供される属性で、特にグラフィックスの変換に使用されます。この属性は現在、ほとんどのブラウザーでサポートされていますが、時間を節約するために、3D 効果で使用される次の属性には互換性が必要です。テクノロジー自体は、後で互換性を考慮する必要はありません。

本題に戻りますが、上記の 2 つのメソッドはパラメータだけで簡単に理解できます。translate() はそれぞれ x 軸方向と y 軸方向に一定の距離を移動します。ネガティブになる。 rotate() は、原点を中心に時計回りに角度を回転させる回転メソッドです。そこで質問なのですが、その起源はどこにあるのでしょうか？変換なので、正確な変換効果を実現するには参照系が必要です。したがって、2D であっても 3D であっても、正しい座標系を見つけて、正しい座標系を見つけてください。とても大切なことなので3回言います。

一般的に、原点は要素の中心点に設定されます。もちろん、この属性を使用して、この原点を調整することもできます。ここでの 50% 50% は、要素のデフォルトの位置を表します。 center は「Others」に変更できます。たとえば、左上隅は Tansform-origin:0% 0%; と記述する必要があります。このようにして原点を調整できます。

transform 属性

2D を理解したら、さらに一歩進んでみましょう。簡単に言うと、transform 属性は x、y、z にそれぞれ設定されます。

#div1{

Transform:translateX(100px) TranslationY(100px)translateZ(100px)rotateX(30deg)rotateY(30deg)rotateZ(30deg);

}

回転部分については特別な説明が必要です、rotateX()は回転を意味しますの回転角度。初期状態では、原点は要素の中心にあり、x 軸の正の方向は原点から水平右方向、y 軸の正の方向は原点から垂直下方向です。正の Z 軸方向は原点から画面に向かう方向です。つまり、 要素が向いている方向がそれ自体の Z 軸方向です。これを必ず覚えておいてください。 結局のところ、transform は単なる属性なので、省略形は上記のようになります。カンマではなくスペースで区切られることに注意してください。また、中国語のtransformは「変身」ではなく「変身」という意味だと個人的には理解しています。変身が完了した後の様子を表します。

レンズ、シミュレートされた 3D 効果

上記の変換が完了したら、3D 効果がありますか? デモを見てみましょう。

まだ変換はありません。 次に、変換属性を追加します。

確かにデフォルメされていることが分かりましたが、

しかし、

は私たちが想像していた 3D 効果とは程遠く、完全にフラットな効果であるとも言えます。

実際、CSS3 の 3D 効果は、ブラウザによって計算、レンダリングされ、最終的にシミュレートされる 3 次元効果です。人の目を欺くことができる画像をシミュレートしたい場合は、遠近感、つまり被写界深度を考慮する必要があります。より簡単に言うと、手前が広く、奥が狭いということです。これが満たされた場合にのみ、CSS3 の 3D 変換で 3D 効果が得られます。そうでない場合、たとえ 3D 変換が実際に実行されたとしても、ブラウザは 3D 効果をまったく持たずに平面に投影します。では、遠近感や被写界深度を追加するにはどうすればよいでしょうか? それは非常に簡単で、1 つの属性だけで行うことができます。

perspective:500；

パースペクティブ属性は、いわゆるレンズ属性であり、要素からの視野角の距離をシミュレートするために使用されます。被写界深度方向、近くの大きなものから遠くの小さなものまでを正確に表現する能力。

試してみましょう。

完璧です。これで、平面要素に 3D 変換効果が追加されました。ここで、システムは座標に注意してください。要素ですが、その Z 軸方向は div の正面が向いている位置でなければなりません。なぜ正面を強調する必要があるかというと、3D 変換により 180 度回転して背面が見えるからです。今回はZ軸方向が逆になります。前面はコンテンツを配置できる面です。

レンズ、ステージ、組み合わせ

立方体を組み立てて動かしたい場合、どうすればよいでしょうか? 「立方体」は 6 つの div で構成されており、それぞれが独自の独立した座標系を持ち、それらの連携変換を調整することでこの効果を実現することは不可能に思えます。簡単な方法はありますか? はい、組み合わせを div で囲むだけで、それに応じて内部の子要素も自然に回転します。したがって、私の理解では、コンビネーションは動くことができない死んだオブジェクトであり、ダイナミックな効果を持たせたい場合は、ステージを操作することで、コンビネーションを全方向に表示および移動させることができます。一番外側のレンズ、その内側のステージ、そしてステージ内のアセンブリの3層構造になりました。一部の専門家のブログでは、それらを「レンズ」、「空間」、「オブジェクト」と呼ぶ傾向があるかもしれません。これは 3D 効果を実現するための基礎です。

最後の「3D位置の保持」

ようやく立方体が完成し、ステージとしてdivでラップしました。立方体を別の角度から見るためにステージを回転させたかったのですが、こうなってしまいました。

立方体が平面になる！なぜこうなった？実際、よく考えてみるとわかりやすいのですが、div はもともと平面要素なので、立方体は直接それに「押しつぶされ」ます。ステージのスペースはディスプレイを収容するのに十分ではないため、この問題を解決するにはステージを拡張して属性を追加する必要があります。

transform-style:preserve-3d;

この属性は、子要素の 3D 位置を予約することを意味します。設定しない場合、デフォルトでは保持されません。つまり、子要素はフラットに表示されます。 。

この属性を追加した後を見てみましょう。

OK、キューブが出てきました。

上記は最も基本的な 3D エフェクトについての私の理解です。もちろん、3D エフェクトはそれほど単純ではありません。たとえば、あえて話さないこともあります。それについては深い経験がありませんし、3D テクニックもまだマスターしていないので、後で経験があれば必ず共有します。