「CSS3」3D効果＆パース_html/css_WEB-ITnose

ブラウザの継続的な進歩と更新に伴い、多くの新機能も登場しています。
以前は gif 画像やフラッシュを使用する必要があった多くの効果が、CSS を使用して実現できるようになりました。コンピューティング能力の一部を消費するため、トラフィックの交換が大幅に減少します。

今日はCSS3の3D効果と非常に新しい遠近法機能を紹介します。

3D変形効果

CSS3の3D効果は、transform属性のrotateX(Y, Z)、translateX(Y, Z)、scaleX(Y, Z)メソッドを使用して設定します。

要素が 3D 変換される場合、3D 空間での初期位置は次のようになります:
// 下の図は間違っており、変更されています

上の図は、位置をわかりやすくするために立方体を使用しています。単一の要素、その形状は平らな領域です。

3D関連のtransform属性のメソッドをそれぞれ紹介しましょう。これらの方法は非常に理解しやすいので、詳細は説明しません。

rotateX (Y, Z)

このメソッドは、要素を X、Y、または Z 軸を中心に axis 回転させます。回転はすべて反時計回りであることに注意してください。

translateX (Y, Z)

translateX と translationY は 2D 空間での移動と同じです。translateZ に注目してみましょう。

平行投影はデフォルトでオンになっているため、要素の Z 値を変更しても視覚的な変化はありません。透視投影を有効にするにはどうすればよいですか?後で紹介しますので、焦らずにまずはじっくり読んでみてください。

scaleX (Y, Z)

X、Y、または Z 軸で画像を拡大縮小します。これについては大した説明はありません。

CSS プロパティ: 変換スタイル

!これは非常に重要な属性で、値は次のとおりです:

• flat(default)

• preserve-3d

ここの多くの記事では明確に説明されていないため、ここで説明してみます。

preserve-3d 属性が設定された要素は 3D 空間を生成し、この 3D 空間にすべての子要素 ​​(子孫要素ではない) が含まれます。
親要素の 変換 属性は、生成された 3D 空間に適用され、空間全体を拡大縮小、移動、回転します。
最後に、すべての要素を画面に平行に投影します (親要素ではありません)。

上の段落を自分で読んで、理解できたら、フラットに分析してみてください。
子要素は親要素の 3D 空間に存在せず、それぞれが独自の 3D 変換を実行します。 順序に従って(つまりtranslateZは無効)が親要素(画面ではなく)に投影されます。
すべての子要素が親要素に投影されるため、親要素のtransform属性の視覚効果は親要素の平面領域になります。

// デモ: case1

このデモを通じて、フラットとプリザーブド 3D の違いを確認し、上記のテキストをより深く理解することができます。

transform:translateX(10px)rotateZ(90deg);

まず10px平行移動してからZ軸を回転軸として90度回転すると思いますか？
実際にはそうではなく、transform の属性は右側のメソッドから左側のメソッドに順番に適用されます。

/*
* 休憩: まずは上記の内容を理解しましょう!
*/

透視投影

透視投影は、人間の目の画像観察方法をシミュレートし、物体の距離と方向を判断することができ、人間が慣れ親しんでいる効果に視覚的に近いものです。

perspective: none | <length>;

transform: perspective(<length>) method(p) method(p) ...;

最初の方法: パースペクティブ属性を >0 の値に変更して、このスペースをパースペクティブ投影に設定します。つまり、すべての サブ要素 (それ自体を除く) が画面上に投影される方法です。透視図法。

2 番目の方法: 要素のtransform属性の最初(つまり、最後の適用)にperspective(d82af2074b26fcfe177e947839b5d381) メソッドを追加すると、この要素の透視投影をオンにすることができます(この要素のみ) ）。

この透視投影の像面は Z=0 平面と一致することに注意してください。模式図は次のとおりです。

このうち、焦点から z=0 平面までの距離が遠近の値です。

上の図から、遠近感の値が小さいほど、Z 値が視覚効果に与える影響が大きくなり、値が大きいほど、Z 値が視覚効果に与える影響がより微妙になることがわかります。一般的に、500px ～ 1000px の方が視覚的に合理的です。

要素の Z 値が要素がフォーカスの背後にあるような場合、要素はキャプチャされません。

// DEMO: case2(perspective: 500px;)

なぜ左の図で上下が表示されるのかを考えてみましょう。 (投影を描画します)

フォーカスの位置を調整することもできます (デフォルトは中心です):

perspective-origin: x y;

x の値は次のとおりです: 長さ、パーセンテージ、左 (0 に相当)、中心 (50 に相当) %、デフォルト)、右 (100% に相当);

y の値は次のとおりです: 長さ、パーセンテージ、上部 (0 に相当)、中央 (50%、デフォルトに相当)、下部 (100% に相当)。

//デモ: case3(perspective-origin: 0 0;)

DEMO

[重要提示]请不要忘记推荐和收藏 (??□′)?? ┴─┴

git clone https://github.com/JasonKid/fezone.git

搜索 3D效果 & 透视