CSS3景深、三維變換屬性及旋轉(zhuǎn)三維立方體的實現(xiàn)

1、©1()奇酷學院I I、XZ QIKUEDU.COMCSS3景深、三維變換屬性及旋轉(zhuǎn)三維立方體的實現(xiàn)三維立體效果我覺得是 CSS3中最有意思的地方， 不得不佩服那些開發(fā)者大神們，讓我們能夠通過幾行CSS代碼就能得到酷炫的視覺體驗。瀏覽器坐標系在講正式語法之前，首先需要了解瀏覽器坐標系，這需要我們把瀏覽器界面想象成一個立體的場景。+ ¥這是網(wǎng)上流傳很廣的瀏覽器坐標系圖片， 從左到右的方向是瀏覽器 x軸的正方向，從上到下 的方向是瀏覽器y軸的正方向，而z軸正方向是面對于我們的， 了解這個很重要，因為下面 我們旋轉(zhuǎn)元素需要借助它來理解。©1（）奇酷學院I I、QIKUE

2、DU.COM3D旋轉(zhuǎn)我們在平面中使用的旋轉(zhuǎn)只是單純的讓元素在平面旋轉(zhuǎn)一定角度，在三維旋轉(zhuǎn)中稍微要復雜一些，屬性當然還是用我們的 transform ，三維旋轉(zhuǎn)有下面三個函數(shù)分別對應(yīng)三個維度的旋轉(zhuǎn)：*rotateX（ xxdeg）«rotateY（ xxdeg）«rotateZ（ xxdeg）rotateX是讓元素繞著x軸旋轉(zhuǎn)，角度越大，元素繞著x軸順時針旋轉(zhuǎn)，類似于我們的單杠運動。tran sform: rotateX（45deg）;rotateY是讓元素繞著y軸旋轉(zhuǎn)，角度越大，元素繞著y軸順時針旋轉(zhuǎn)，類似于鋼管舞運動)奇酷學院I l|、QIKUEDU.COMtran sf

3、orm: rotateY(45deg);rotateZ是讓元素繞著z軸旋轉(zhuǎn)，角度越大，元素繞著z軸順時針旋轉(zhuǎn)，這就是我們在二維平面的旋轉(zhuǎn)，類似于轉(zhuǎn)盤tran sform: rotateZ(45deg);©1()奇酷學院I I、V-Z QIKUEDU COM其實3D旋轉(zhuǎn)還有一個合成的函數(shù)是rotate3d(num,num,num,deg),用的不是很多，我就簡單說一下，參數(shù)并不是我們想那樣的3個角度值，而是三個數(shù)字一個角度值，前三個數(shù)字分別表示繞x、y、z軸旋轉(zhuǎn)的矢量值，最后一個表示在空間的旋轉(zhuǎn)角度，等價關(guān)系如下 rotate3d(1,0,0,xxdeg) <=> rota

4、teX(xxdeg)rotate3d(0,1,0,xxdeg) <=> rotateY(xxdeg)rotate3d(0,0,1,xxdeg) <=> rotateZ(xxdeg)3D位移與3D縮放我們在2D中用到translateX()和translateY()在平面移動，3D中我們多了 translateZ()允許我們沿著z軸平移，同樣可以使用合成函數(shù)translate3d(x,y,z)，注意前兩個值可以使用百分比形式，但是沿 z軸平移的值只能使用長度值。同理我們的3D縮放 scaleX(num) 、scaleY(num) 、scaleZ(num) 、scale3d

5、(num,num,num)©1()奇酷學院I I、QIKUEDU COMI至于它們的用法下面再通過例子來說，（3D的傾斜屬性是不存在的，換句話說，不存在skew3d 函數(shù)）透視/景深屬性perspective景深這個名詞，維基百科是這樣就解釋的景深（英語：Depth of field, DOF）景深是指相機對焦點前后相對清晰的成像范圍。在光學中，尤其是錄影或是攝影，是一個描述在空間中，可以清楚成像的距離范圍。雖然透鏡只能夠?qū)⒐饩鄣侥骋还潭ǖ木嚯x，遠離此點則會逐漸模糊，但是在某一段特定的距離內(nèi)，影像模糊的程度是肉眼無法察覺的，這段距離稱之為景深。當焦點設(shè)在超焦距處時，景深會從超焦距的一

6、半延伸到無限遠，對一個固定的光圈值來說，這是最大的景深。（看到這里，我的手默默的離開了鍵盤，仰天長嘆，心想，這到底要什么樣的學歷才能看得懂）我們可以這樣來理解，景深就是我們的肉眼距離顯示器的距離，景深越大，元素離我們越遠,效果就不好，在我們 CSS3中，perspective 用于激活一個3D空間，屬性值就是景深大小（默認none無景深），有兩種用法.stage perspective: 500px;應(yīng)用景深的元素稱為“舞臺元素”，舞臺元素的所有后代元素都會受影響，（如果后代元素中也添加了 perspective 屬性，效果會疊加而不是覆蓋）©11()奇酷學院I J、QIKUEDU.

7、COM<div class="stage"><div class="demo"></div></div>.stage width: 200px;height: 200px;border: 1px solid black;margin: 100px auto;.stage .demo width: 200px;height: 200px;backgro un d-color: oran gered; tran sform: rotateX(45deg);在這個例子中，我們把內(nèi)部元素繞x軸旋轉(zhuǎn)了 45。后，由于

8、他只是在二次元旋轉(zhuǎn)，所以我們根本看不出來它旋轉(zhuǎn)，但是我們現(xiàn)在加個景深©11()奇酷學院I I、QIKUEDU.COM.stage width: 200px;height: 200px;border: 1px solid black;margin: 100px auto;perspective: 500px; /*增 */.stage .demo width: 200px;height: 200px;backgro un d-color: oran gered;tran sform: rotateX(45deg);500px，由于這就相當于我們在舞臺元素的中心位置往里看，這個子元素距離

9、我們?nèi)庋塾?子元素的順時針旋轉(zhuǎn)，元素上半部分離我們遠，所以看起來很小，元素下半部分離我們近, 所以看起來稍大，這樣就會產(chǎn)生很強的立體感©11()奇酷學院I I、QIKUEDU.COM的位置是可以調(diào)整，也就是舞臺元素剛才我說道我們的肉眼相當于在舞臺元素中心的位置，其實這個“眼睛”的，這用到了 perspective-origin屬性，默認的屬性值就是50% 50%的中心位置，我們可以嘗試調(diào)整視角。.stage width: 200px;height: 200px;border: 1px solid black;margin: 100px auto;perspective: 500px;

10、perspective-origi n: 10px 10px; /*增 */.stage .demo width: 200px;height: 200px;backgro un d-color: oran gered;tran sform: rotateX(45deg);©1()奇酷學院I I、QIKUEDU.COM這就相當于在舞臺元素的距離原點（左上）10px , 10px的位置往里看，理解這個需要我們一定的空間立體感AssumedEye Position注意：景深大小一定要比你的動畫元素大（我們不可能看到眼睛后面的東西）景深的另一種用法， 是應(yīng)用在動畫元素（不是舞臺元素）變形的函

11、數(shù)中，和其他變形函數(shù)寫 在一起.stage .demo tran sform: rotateX(45deg) perspective(IOOpx);©1()奇酷學院I I、/ QIKUEDU.COM3D 屬性 transform-style這個屬性指定了子元素如何在空間中展示，只有兩個屬性值：flat （默認）和preserve-3d ,flat表示所有子元素在 2D平面呈現(xiàn)，preserve-3d表示所有子元素在 3D平面呈現(xiàn)，（prederve 是保護、維持的意思，preserve-3d就是保持三維空間的意思），當然如果我們想要 3D 的效果，就要使用transform-styl

12、e: preserve-3d;這個屬性只是針對設(shè)置屬性元素的子元素如何展示，而對子元素的子元素無效，而且對于設(shè)置了 overflow: hidden;的元素，設(shè)置 3D效果會失效，道理很簡單，跳出了父元素平面的子元素無法顯示了，結(jié)果自然還是2D效果，應(yīng)用于這個屬性的元素我們稱作“容器”，這個屬性我們下面通過一個例子再來體會背面可見屬性 backface-visibilityvisibility(默認)通過這個元素我們可以指定當元素背對我們時是否可見，只有兩個屬性值 和hidden，如果我們希望元素背對我們不可見，就這樣設(shè)置.demo backface-visibility: hidde n;F

13、面我通過一個例子來把上面講到的屬性全部實踐一下示例：旋轉(zhuǎn)的三維立方體<div class="stage"><!-舞臺元素，視角所在->©1()奇酷學院I I、V-Z QIKUEDU.COM!<ul class="three-d-box"><!-動畫容器，通過它來控制整個立方體-><li> ?</li><!-動畫元素，立方體的六個面-><li> ?</li><li> ?</li><li> ?</li

14、><li> ?</li><li> ?</li></ul></div>ul /* 調(diào)整ul標簽的樣式，取消內(nèi)邊距、外邊距，和 點”樣式*/padd ing: 0;margi n: 0;list-style-type: none;.stage /*設(shè)置舞臺元素在屏幕居中，設(shè)置合適的景深大小*/positi on: relative;width: 800px;height: 800px;margin: 100px auto;perspective: 800px;keyframes move /*設(shè)置動畫關(guān)鍵幀*/0% tr

15、an sform: rotateX(Odeg);25% tran sform: rotateX(180deg);50% tran sform: rotateX(360deg) rotateY(Odeg);75% tran sform: rotateX(360deg) rotateY(180deg);©1()奇酷學院I I、V-Z QIKUEDU.COM100% tran sform: rotateX(360deg) rotateY(360deg);.stage .three-d-box /*動畫容器居中在舞臺元素中間*/width: 200px;height: 200px;posit

16、i on: absolute;left: 50%;top: 50%;margi n: -100px 0 0 -100px;transform-style: preserve-3d; /*設(shè)置3D屬性讓子元素三維空間呈現(xiàn) */animation: move 3s linear infinite; /*設(shè)置動畫 */.stage .three-d-box>li /*設(shè)置動畫子元素公共屬性*/positi on: absolute;width: 200px;height: 200px;left: 0;top: 0;fon t-size: 50px;lin e-height: 200px;tex

17、t-alig n: cen ter;opacity: 0.5;/*為了保證我們對立方體位置的控制，我們需要讓動畫容器在立方體的中間位置*/.stage .three-d-box>li: nth-child(1) backgro un d-color: red;tran sform: tran slateZ(-100px);.stage .three-d-box>li: nth-child(2) ©1()奇酷學院I I、QIKUEDU.COMbackgro un d-color: gree ny ellow;tran sform: tran slateZ(100px);.s

18、tage .three-d-box>li: nth-child(3) backgro un d-color: corn flowerblue;tran sform: rotateX(90deg) tran slateZ(100px);.stage .three-d-box>li: nth-child(4) backgro un d-color: oran gered;tran sform: rotateX(-90deg) tran slateZ(100px);.stage .three-d-box>li: nth-child(5) backgro un d-color: deepp ink;tran sform: rotateY(90deg) tran slateZ(100px);.stage .three