css3中的3維平面z軸有負值。 3維座標系中z軸往螢幕外面是數值為正，往螢幕裡面數值為負值；當translate3D屬性值中z軸為負值時，元素向螢幕內位移，語法為「transform:translate3d(x, y,z)」。
本教學操作環境：windows10系統、CSS3&&HTML5版、Dell G3電腦。
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度
back盒子要沿著y軸旋轉180度
css影片教學###）###以上是css3中的3維平面z軸有負值嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！
