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

創(chuàng)新互聯(lián)專注于企業(yè)網(wǎng)絡(luò)營銷推廣、網(wǎng)站重做改版、平谷網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5高端網(wǎng)站建設(shè)、商城網(wǎng)站開發(fā)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為平谷等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

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

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

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

3D移動 translate3D

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

x，y，z是不能省略的，如果沒有就寫0

3D移動在2D移動的基礎(chǔ)上，多加了一個可以移動的方向，就是z軸方向

transform：translateX（100px），僅僅在X軸移動
transform：translateY（100px），僅僅在Y軸移動
transform：translateZ（100px），僅僅在Z軸移動
transform：translate3d（x，y，z），設(shè)置，xyz的值，z要用像素單位，不帶百分比

透視 perspective

在2D平面產(chǎn)生近大遠小視覺立體，但是只是效果二維的。

1.如果想要在網(wǎng)頁中產(chǎn)生3D效果需要透視（理解成3D物體投影在2D平面內(nèi)）

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

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

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

5.透視的單位是像素

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

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

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

translateZ

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

3D旋轉(zhuǎn)rotate3d

transform:rotate3d(x,y,z,deg),沿著自定義軸旋轉(zhuǎn)deg角度（了解即可）

xyz表示旋轉(zhuǎn)軸的矢量，表示沿著該矢量軸旋轉(zhuǎn)，最后一個表示旋轉(zhuǎn)角度

transform:rotate3d(1,0,0,45deg)x軸旋轉(zhuǎn)45deg
transform:rotate3d(1,1,0,45deg)對角線旋轉(zhuǎn)45deg

3D旋轉(zhuǎn)可以讓元素在三維平面內(nèi)沿著x軸，y軸，z軸或者自定義軸旋轉(zhuǎn)

語法：

transform:rotatex(45deg):沿x軸正方向旋轉(zhuǎn)45deg
transform:rotatey(45deg):沿y軸正方向旋轉(zhuǎn)45deg
transform:rotatez(45deg):沿z軸正方向旋轉(zhuǎn)45deg
transform:rotate3d(x,y,z,deg):沿著自定義軸旋轉(zhuǎn)deg為角度（了解即可）

對于元素旋轉(zhuǎn)的方向判斷，我們需要一個左手準則

左手準則：

左手的手拇指指向x軸的正方向

其余手指彎曲方向就是該元素沿著x軸旋轉(zhuǎn)的方向。

X旋轉(zhuǎn)：

正值是頭往屏幕里面仰

負值是頭往屏幕外面倒

Y軸旋轉(zhuǎn)：

左手準則也可以

Z軸旋轉(zhuǎn)：

和2d旋轉(zhuǎn)沒啥區(qū)別

3D呈現(xiàn) transform-style

1.控制子元素是否開啟三維立體環(huán)境

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呈現(xiàn)

back盒子要沿著y軸旋轉(zhuǎn)180度

最后鼠標經(jīng)過box在沿著y軸旋轉(zhuǎn)180度

讀到這里，這篇“css3中的3維平面z軸有沒有負值”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。