css3の3次元平面のz軸に負の値はありますか？

css3 の 3 次元平面の Z 軸が負の値になります。 3 次元座標系では、Z 軸の画面外側に向かう値が正、画面内側に向かう値が負となり、translate3D 属性値の Z 軸が負の場合、要素は画面内に置き換えられ、構文は「transform:translate3d(x, y,z)」になります。

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3 の 3 次元平面の z 軸に負の値はありますか?

3 次元平面の z 軸に負の値がありますか? css3 で?

三次元座標系 3 次元空間を指します。空間は 3 つの軸で構成されます。Z 軸は画面の外側が正、内側が負です。

3D 動作 translation3D

transform: translateX(100px) translateY(100px) translateZ(100px);简写方法transform:translate3d（x，y，z）

xx, y, z は省略不可、省略できない場合は 0

3D 動作は 2D 動作をベースにしています。上部では、移動可能な方向が追加されます。これは Z 軸方向です。

transform：translateX（100px），仅仅在X轴移动
transform：translateY（100px），仅仅在Y轴移动
transform：translateZ（100px），仅仅在Z轴移动
transform：translate3d（x，y，z），设置，xyz的值，z要用像素单位，不带百分比

Perspective

は、近くの視覚的な立体ビューを生成します。 、2D 平面内では大きく、遠く、小さくなりますが、それは単なる 2 次元の効果です。

1. Web ページで 3D 効果を生成したい場合は、遠近法が必要です (2D 平面に投影された 3D オブジェクトとして理解されます)

2. 人間の視覚的な位置をシミュレートするには, あなたは片目を See

3 に配置することを考えることができます。遠近感は視覚距離とも呼ばれます。視覚距離は人間の目から画面までの距離です。

4. 視覚に近づくほど、コンピュータ平面上の画像は大きく、遠ざかるほど画像は小さくなります

5 遠近感の単位はピクセルです

の親ボックスに書かれている遠近感観察される要素は

d です: それは観察距離であり、観察距離は人間の目からスクリーンまでの距離です。視点が小さいほど、オブジェクトは大きくなります。

z: オブジェクトと画面間の距離を示す Z 軸であり、Z 軸が大きいほど (正の値)、オブジェクトが大きく見えます。

translateZ

親ボックスにパースペクティブ値を与え、異なる div に異なる Z 値を与えると、表示される効果は異なります。

3D回転rotate3d

transform:rotate3d(x,y,z,deg)、カスタム軸に沿って度の角度を回転します（理解してください）

xyz は回転軸のベクトルを表し、ベクトル軸に沿った回転を示し、最後のものは回転角度を表します

transform:rotate3d(1,0,0,45deg)x轴旋转45deg
transform:rotate3d(1,1,0,45deg)对角线旋转45deg

3D 回転により、要素は x 軸、y 軸に沿って移動できます、z 軸またはカスタム軸の回転

構文:

transform:rotatex(45deg):沿x轴正方向旋转45deg
transform:rotatey(45deg):沿y轴正方向旋转45deg
transform:rotatez(45deg):沿z轴正方向旋转45deg
transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度（了解即可）

要素の回転方向を判断するには、左側の基準が必要です

左側の基準:

左手の親指は x 軸の正の方向を指しています。

残りの指の曲げ方向は、要素が x 軸に沿って回転する方向です。

左手の基準も使用できます

Z 軸回転:

2D 回転と変わりません

3D renderingtransform-style

1. サブ要素が 3 次元空間を有効にするかどうかを制御します。

2.transform-style: flat サブ要素は 3 次元空間を有効にしません-次元空間、デフォルトは

3 です。transform-style:preserve-3d 、子要素は 3 次元空間を開きます

4。コードは親に書き込まれますが、子ボックスに影響します

5。この属性は非常に重要なので、後で使用する必要があります

構文:

.fa {
perspective: 500px;
position: relative;
margin: 50px auto;
transform-style: preserve-3d;
}
.son1,
.son,
.fa {
width: 200px;
height: 200px;
transition: all 2s;
}

2. CSS スタイル

ボックスサイズを指定します。3D レンダリングを忘れずに追加してください。

バック ボックスは y 軸に沿って 180 度回転する必要があります。

最後にマウスが通過します。ボックスは y 軸に沿って 180 度回転します

(学習ビデオ共有:

css ビデオ チュートリアル

)

以上がcss3の3次元平面のz軸に負の値はありますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。