沈陽(yáng)網(wǎng)站制作易勢(shì)最專業(yè)！

　　要想實(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í)的效果：

　　?。?）只有當(dāng)兩個(gè)值都設(shè)置，不管是靜止還是旋轉(zhuǎn)，都會(huì)看到立體的效果。

注意：（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；