好程序員web前端系列之CSS3-3D

好程序員 web前端系列之 CSS3 - 3D , 什么是 3d的場景呢? 2d場景,在屏幕上水平和垂直的交叉線x軸和y軸
3d場景,在垂直于屏幕的方法,相對于3d多出個z軸 
Z軸:靠近屏幕的方向是正向,遠(yuǎn)離屏幕的方向是反向 
好程序員web前端系列之CSS3-3D

成都創(chuàng)新互聯(lián)長期為上千客戶提供的網(wǎng)站建設(shè)服務(wù),團隊從業(yè)經(jīng)驗10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為湞江企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、成都做網(wǎng)站,湞江網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

CSS3中的3D變換主要包括以下幾種功能函數(shù):   3D位移: CSS3中的3D位移主要包括translateZ()和translate3d()兩個功能函數(shù);   3D旋轉(zhuǎn): CSS3中的3D旋轉(zhuǎn)主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四個功能函數(shù);   3D縮放: CSS3中的3D縮放主要包括scaleZ()和scale3d()兩個功能函數(shù);

景深

生活中的 3d 區(qū)別于2d的地方

近大遠(yuǎn)小 景深
程序中實現(xiàn)的方法 perspective 元素距離 視線的距離(物體和眼睛的距離越小,近大遠(yuǎn)小的效果越明顯) perspective: 1200px;(在父元素中使用)transform:perspective(1200px) (在子元素中使用) 兩個都設(shè)置會發(fā)生沖突,建議只設(shè)置父元素,通常的數(shù)值在 900-1200之間 
如果當(dāng)你的視線距離物體足夠遠(yuǎn)的時候,基本上就不會有近大遠(yuǎn)小的感覺

perspective-origin;

觀察 3d元素的(位置)角度 perspective-origin:center center (中心)
perspective-origin:left top (左上角)
perspective-origin:100% 100% (右下角)

transform-style屬性

transform-style屬性是3D空間一個重要屬性,指定嵌套元素如何在3D空間中呈現(xiàn)。他主要有兩個屬性值:flat和preserve-3d 其中 flat值為默認(rèn)值,表示所有子元素在2D平面呈現(xiàn)。preserve-3d表示所有子元素在3D空間中呈現(xiàn)。
也就是說,如果對一個元素設(shè)置了 transform-style的值為flat,則該元素的所有子元素都將被平展到該元素的2D平面中進行呈現(xiàn)。沿著X軸或Y軸方向旋轉(zhuǎn)該元素將導(dǎo)致位于正或負(fù)Z軸位置的子元素顯示在該元素的平面上,而不是它的前面或者后面。如果對一個元素設(shè)置了transform-style的值為preserve-3d,它表示不執(zhí)行平展操作,他的所有子元素位于3D空間中。 
好程序員web前端系列之CSS3-3D

3d重要功能函數(shù)

1、 3D位移

在 CSS3中3D位移主要包括兩種函數(shù)translateZ()和translate3d()。translate3d()函數(shù)使一個元素在三維空間移動。 
語法: translate3d(tx,ty,tz)  tx:代表橫向坐標(biāo)位移向量的長度;
 ty:代表縱向坐標(biāo)位移向量的長度;
 tz:代表Z軸位移向量的長度。此值不能是一個百分比值,如果取值為百分比值,將會認(rèn)為無效值。 


ranslateZ()函數(shù)的功能是讓元素在3D空間沿Z軸進行位移。 語法: translateZ(t)  t:指的是Z軸的向量位移長度。

2、 3D旋轉(zhuǎn)

在三維變形中,我們可以讓元素在任何軸旋轉(zhuǎn)。為此, CSS3新增三個旋轉(zhuǎn)函數(shù):rotateX()、rotateY()、rotateZ()和rotate3d(x,y,z,a)。

rotateX(a)

rotateX()函數(shù)指定一個元素圍繞X軸旋轉(zhuǎn),旋轉(zhuǎn)的量被定義為指定的角度;如果值為正值,元素圍繞X軸順時針旋轉(zhuǎn);反之,如果值為負(fù)值,元素圍繞X軸逆時針旋轉(zhuǎn)。

rotateY(a)

rotateY()函數(shù)指定一個元素圍繞Y軸旋轉(zhuǎn),旋轉(zhuǎn)的量被定義為指定的角度;如果值為正值,元素圍繞Y軸順時針旋轉(zhuǎn);反之,如果值為負(fù)值,元素圍繞Y軸逆時針旋轉(zhuǎn)。

rotateZ(a)

rotateZ()函數(shù)和其他兩個函數(shù)功能一樣的,區(qū)別在于rotateZ()函數(shù)指定一個元素圍繞Z軸旋轉(zhuǎn)。

rotate3d(x,y,z,a)

x:是一個0到1之間的數(shù)值,主要用來描述元素圍繞X軸旋轉(zhuǎn)的矢量值;
y:是一個0到1之間的數(shù)值,主要用來描述元素圍繞Y軸旋轉(zhuǎn)的矢量值;
z:是一個0到1之間的數(shù)值,主要用來描述元素圍繞Z軸旋轉(zhuǎn)的矢量值;
a:是一個角度值,主要用來指定元素在3D空間旋轉(zhuǎn)的角度,如果其值為正值,元素順時針旋轉(zhuǎn),反之元素逆時針旋轉(zhuǎn)。 
好程序員web前端系列之CSS3-3D

3、 3D縮放

CSS3 3D變形中的縮放主要有scaleZ()和scale3d()兩種函數(shù),當(dāng)scale3d()中X軸和Y軸同時為1,即scale3d(1,1,sz),其效果等同于scaleZ(sz)。通過使用3D縮放函數(shù),可以讓元素在Z軸上按比例縮放。默認(rèn)值為1,當(dāng)值大于1時,元素放大,反之小于1大于0.01時,元素縮小

scale3d(sx,sy,sz)

 sx:橫向縮放比例;
 sy:縱向縮放比例;
 sz:Z軸縮放比例;

scaleZ(s)

s:指定元素每個點在Z軸的比例。 
注: scaleZ()和scale3d()函數(shù)單獨使用時沒有任何效果,需要配合其他的變形函數(shù)一起使用才會有效果

標(biāo)題名稱:好程序員web前端系列之CSS3-3D
本文路徑:http://bm7419.com/article0/iiheoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供動態(tài)網(wǎng)站、網(wǎng)站導(dǎo)航App開發(fā)、自適應(yīng)網(wǎng)站微信公眾號、外貿(mào)建站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護公司