css3中的3維平面z軸有沒有負值

本文小編為大家詳細介紹“css3中的3維平面z軸有沒有負值”，內容詳細，步驟清晰，細節處理妥當，希望這篇“css3中的3維平面z軸有沒有負值”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

css3中的3維平面z軸有負值。3維坐標系中z軸往屏幕外面是數值為正，往屏幕里面數值為負值；當translate3D屬性值中z軸為負值時，元素向屏幕內位移，語法為“transform:translate3d(x,y,z)”。

本教程操作環境：windows10系統、CSS3&&HTML5版、Dell G3電腦。

css3中的3維平面z軸有負值嗎

css3中的3維平面z軸有負值

三維坐標系就是指立體空間，空間是由三個軸共同構成，Z軸往屏幕外面是正值，里面是負值！

3D移動 translate3D

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

x，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平面產生近大遠小視覺立體，但是只是效果二維的。

1.如果想要在網頁中產生3D效果需要透視（理解成3D物體投影在2D平面內）

2.模擬人類視覺位置，可以認為安排一只眼睛去看

3.透視我們也稱為視距：視距就是人的眼睛到屏幕的距離

4.距離視覺點越來越近的在電腦平面成像越大，越遠成像越小

5.透視的單位是像素

透視寫在被觀察元素的父盒子上面的

d：就是視距，視距是一個距離人的眼睛到屏幕的距離，透視越小，物體越大。

z：就是z軸，物體距屏幕的距離，z軸越大（正值）我們看到的物體就越大。

translateZ

給一個父盒子一個透視值，給不同的div不同的z值，所看到的效果是不一樣的。

3D旋轉rotate3d

transform:rotate3d(x,y,z,deg),沿著自定義軸旋轉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軸旋轉的方向。

X旋轉：

正值是頭往屏幕里面仰

負值是頭往屏幕外面倒

Y軸旋轉：

左手準則也可以

Z軸旋轉：

和2d旋轉沒啥區別

3D呈現 transform-style

1.控制子元素是否開啟三維立體環境

2.transform-style：flat子元素不開啟3d立體空間，默認的

3.transform-style：preserve-3d，子元素開啟立體空間

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樣式

box指定大小，切記要加3d呈現

back盒子要沿著y軸旋轉180度

最后鼠標經過box在沿著y軸旋轉180度

讀到這里，這篇“css3中的3維平面z軸有沒有負值”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。