
build網(wǎng)站制作 |
【html5】3D立方體旋轉(zhuǎn)——鼠標(biāo)/鍵盤可控旋轉(zhuǎn)方向 當(dāng)前位置:首頁(yè)>主要服務(wù)>網(wǎng)站制作>html![]() 要想實(shí)現(xiàn)3D的效果,其實(shí)非常簡(jiǎn)單,只需指定一個(gè)元素為容器并設(shè)置transform-style:preserve-3d,那么它的后代元素便會(huì)有3D效果。不過(guò)有很多需要注意的地方,這里把我學(xué)習(xí)的方法,過(guò)程分享給大家。再講知識(shí)點(diǎn)之前,還是先弄清楚3D的坐標(biāo)系吧,從網(wǎng)上搜了一張經(jīng)典坐標(biāo)系圖,供大家回顧一下。
1、3D試圖 transform-style:flat(默認(rèn),二維效果) / preserve-3d(三維效果)。設(shè)置一個(gè)元素的transform-style:preserve-3d;只影響這個(gè)元素的子元素(如果孫元素也有3d效果,那么還必須給子元素設(shè)置preserve-3d)。這樣所有子元素都可以相對(duì)與父元素的平面進(jìn)行3d變形操作。和二維變形一樣,三維變形可以使用transform屬性來(lái)設(shè)置。可以通過(guò)制定的函數(shù)或者通過(guò)三維矩陣來(lái)對(duì)元素變型。列舉幾個(gè)函數(shù): translate3d(x,y,z) 使元素在這三個(gè)緯度中移動(dòng),也可以分開寫,如:translateX(length),translateY(length), translateZ(length)。注意z軸的值只能為px; scale3d(number,number,number) 使元素在這三個(gè)緯度中縮放,也可分開寫,如:scaleX(),scaleY(),scaleY()。 rotateX(angle) 是元素依照x軸旋轉(zhuǎn); rotateY(angle) 是元素依照y軸旋轉(zhuǎn); rotateZ(angle) 是元素依照z軸旋轉(zhuǎn)。 2、透視/景深效果 perspective(length) 為一個(gè)元素設(shè)置三維透視的距離。僅作用于元素的后代,而不是其元素本身。當(dāng)perspective:none/0;時(shí),相當(dāng)于沒(méi)有設(shè)perspective(length)。比如你要建立一個(gè)小立方體,長(zhǎng)寬高都是200px。如果你的perspective < 200px ,那就相當(dāng)于站在盒子里面看的結(jié)果,如果perspective 非常大那就是站在非常遠(yuǎn)的地方看(立方體已經(jīng)成了小正方形了)。 當(dāng)元素沒(méi)有設(shè)置perspective(length)時(shí),所有后代元素被壓縮在同一個(gè)二維平面上,不存在景深的效果。如果設(shè)置perspective(length)后,將會(huì)看到三維的效果。默認(rèn)的透視視角中心在容器(是perspective所在的元素,不是他的后代元素)的中點(diǎn),也就是perspective-origin: 50% 50%。當(dāng)然你也可以自己設(shè)置,比如:左上角-webkit-perspective-origin: 0px 0px;。 綜合以上兩點(diǎn),我們可以通過(guò)幾個(gè)實(shí)例,來(lái)深入了解下perspective(length); 和 transform-style:preserve-3d; (1)當(dāng)設(shè)置perspective(length);不設(shè)置transform-style:preserve-3d;當(dāng)元素靜止時(shí),會(huì)有立體的效果:
(2)當(dāng)設(shè)置perspective(length);不設(shè)置transform-style:preserve-3d;當(dāng)元素旋轉(zhuǎn)時(shí)的效果:
?。?)當(dāng)設(shè)置transform-style:preserve-3d;不設(shè)置perspective(length);當(dāng)元素靜止時(shí),不會(huì)有立體的效果。
?。?)當(dāng)設(shè)置perspective(length);不設(shè)置transform-style:preserve-3d;當(dāng)元素旋轉(zhuǎn)時(shí)的效果:
注意:(1)如果一個(gè)元素以x軸或y軸旋轉(zhuǎn)90度以上的話,那么它的背面將面向用戶。背面的元素始終是透明的,所以用戶通過(guò)后面看到正面的反向形態(tài),就像是從在玻璃門后面看對(duì)外張貼的標(biāo)志。為了防止顯示鏡像的前面??梢詫ackface-visibility設(shè)置為hidden;如果backface-visibility:hidden;那么這個(gè)元素就不會(huì)在背面可見(jiàn)了。這么做的一個(gè)原因就是,想一個(gè)元素有兩個(gè)面,就像一個(gè)撲克牌。比如:創(chuàng)建一張撲克牌,正面和背面一定不一樣,這兩個(gè)面的位置是背靠背的。這兩個(gè)元素一起轉(zhuǎn)動(dòng),正面逐步向后反轉(zhuǎn)隱藏,同時(shí)背面向前反轉(zhuǎn)并出現(xiàn)。如果背面的元素是可見(jiàn)的,旋轉(zhuǎn)時(shí)它將掩蓋它底下的元素,而不是露出它下面的元素。 (2)如果父元素設(shè)置overflow:hidden;那么子元素就無(wú)法跳出父元素的平面,也就不能出現(xiàn)3D效果。就如同,transform-style:flat;
41
網(wǎng)站動(dòng)態(tài)
|

易勢(shì)網(wǎng)站制作,以DIV+CSS為主,js/jQuery為輔,制作利于優(yōu)化,頁(yè)面美觀的優(yōu)質(zhì)網(wǎng)站!

網(wǎng)絡(luò)策劃公司|新浪官方微博|大連網(wǎng)站建設(shè)
沈陽(yáng)易勢(shì)科技有限公司 網(wǎng)站制作網(wǎng)絡(luò)營(yíng)銷公司 © 2011 , All rights reserved. 公司地址:沈陽(yáng)市鐵西區(qū)貴和街道建設(shè)中路15號(hào)淺草綠閣商務(wù)樓402室沈陽(yáng)網(wǎng)站制作易勢(shì)最專業(yè)
遼B2-20150173-8