CSS3 3D特殊効果映像データ共有

CSSはカスケードスタイルシートです。 Web ページの作成時にカスケード スタイル シート テクノロジを使用すると、ページのレイアウト、フォント、色、背景、その他の効果をより正確に制御できるようになります。

CSS3 は CSS テクノロジーのアップグレードされたバージョンであり、CSS3 言語開発はモジュール化に向けて発展しています。以前の仕様はモジュールとして大きすぎて複雑だったので、より小さなモジュールに分割され、さらに新しいモジュールが追加されました。これらのモジュールには、ボックス モデル、リスト モジュール、ハイパーリンク メソッド、言語モジュール、背景と境界線、テキスト効果、複数列レイアウトなどが含まれます。

「CSS3 3D 特殊効果ビデオチュートリアル」では、CSS3 のトランジション属性、パースペクティブ属性、トランスフォーム属性を使用して、リアルで使用可能な 3 次元効果を作成します。

ビデオ再生アドレス: //m.sbmmt.com/course/416.html

このビデオの学習の難しさ

1. 回転と傾きの方向

傾きの変更で最も重要なことは、デフォルトの変換方向です。

回転変換の場合、デフォルトでは、基準軸の正の方向に沿って時計回りに変換を実行します（使用する回転方法によって決定されます。たとえば、rotateX() の基準軸は X 軸です）。上図の黒枠で囲まれた平面をX軸を基準軸として要素と考え、要素を(+)30°回転させると黒い平面はX-軸上に固定されます。軸と Y 軸は正の方向にあります。片側を上に持ち上げます (木の板を持ち上げるのと同じように、持ち上げた木の板はまだ平面にあり、本をめくるように曲がりません)。同じことがrotateY()にも当てはまります。 rotateZ() は、要素を時計回りに回転する 2D 変換のrotate() メソッドと同等です。

rotatex

rotatey

rotatez

傾き変換の場合、X軸とY軸の方向が逆になります。 skewX() は要素の垂直側面を反時計回り (つまり、左) に傾けますが、skewY() は要素の水平側面を時計回り (つまり、下) に傾けます。

skewx

skewy

2. 変換の基点、視点、表示距離

デフォルトでは、CSS3 変換の基点は要素の中心点です。つまり、変換後 (回転、傾き、拡大縮小のみ)要素の中心点 要素の座標は変更されません。たとえば、要素の初期位置は画面の左上隅と一致し、30 度回転した後の座標は幅と高さの両方が 100 ピクセルになります。要素の中心点の は (50,50) のままです。

視点は別の種類の基点であり、3D 変換にのみ使用されます。遠近法を理解するには、遠近法的思考を使用できます。このゲームについて誰もが「2本の平行な直線が無限遠で交わる」という印象を持つはずだ。 3 次元空間内の直線は、たとえ無限遠であっても交差することは不可能ですが、人間の目に投影されると、元は平行だった直線は、「遠近法」によって点で交差するまで互いに近づき続けます。現象。

ただし、視点は線の交点ではなく、実際には上の写真の視点は平面の最外面、つまり真ん中の立方体が画面の外側に向かって突進する面にあります。 CSS の視点の原理は同じで、人間の目が特定の位置にあるときに要素がどのように見えるかをシミュレートするだけです。つまり、人間の目がさまざまな位置にあるときに要素がどのように見えるかをシミュレートします。 「視点」では、人々が見ることができるようにさまざまな表面を提示します。視点は、要素のこの 3 次元表現をシミュレートするために使用される属性です。

もう一つ言及しなければならない特性は、視距離です。名前が示すように、視距離は視点からのオブジェクトの距離です。 「遠近法」の原理によれば、物体が人間の目を遮るほど近くにあるとき、物体が遠くにあるときは小さく見えます。非常に小さく見えます。パースペクティブ属性は、translateZ() メソッドと組み合わせて「食べる」必要があり、親要素のパースペクティブを設定し、同時に、translateZ() メソッドを子要素に適用します。つまり、親要素が使用されます。人間の目の位置をシミュレートし、子要素は見たいオブジェクトです。 translationZ() メソッドが子要素に適用されない場合、translateZ(0) と同等になり、要素は元のサイズを表示します。移動距離が表示距離に近づくほど (超えない)、要素は大きくなります。そうでない場合は小さく表示され、移動距離が表示距離を超えると、要素は消えます。これは、人間の目の後ろを走るオブジェクトと同じであり、自然に見えなくなります。遠近法の動作原理は、要素によって設定された元のサイズを表示距離での要素のサイズとして使用することです。したがって、距離 (+) を移動すると、要素は大きくなります。 ) を指定すると要素は小さくなりますが、視距離が設定されている場合にのみ有効でなければなりません。

また、上の透視図のように、位置が異なるとオブジェクトの見え方も異なります。 CSS では、この効果を実現するには、親要素の表示距離を設定してから、複数の子要素に変換を適用します。

以上がCSS3 3D特殊効果映像データ共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。