在圣誕主題中運(yùn)用了不少的3D視角的效果，比如開(kāi)窗、3d旋轉(zhuǎn)，所以需要了解下css中3D變換是如何呈現(xiàn)出來(lái)的？

要想實(shí)現(xiàn)3D的效果，只需指定一個(gè)元素為容器并設(shè)置transform-style：preserve-3d，那么它的后代元素便會(huì)有3D效果。不過(guò)有很多需要注意的地方
坐標(biāo)系統(tǒng)的 z 軸同時(shí)與 x 和 y 軸垂直

1、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ì)元素變型

可以呈現(xiàn)3d的屬性有，translate3d、scale3d、rotateX、rotateY、rotateZ等等

2、透視/景深效果

perspective(length) 為一個(gè)元素設(shè)置三維透視的距離。僅作用于元素的后代，而不是其元素本身。簡(jiǎn)單的來(lái)說(shuō)就是假想下，當(dāng)我們看一個(gè)房子的時(shí)候，比如房子有200米長(zhǎng)，在房里里面與在房子外面，看到的角度都是不一樣的，當(dāng)設(shè)置perspective<200的時(shí)候，就是我們?cè)诜坷锟矗绻鹥erspective>200或者更多的時(shí)候，就相當(dāng)在外面看，而且越遠(yuǎn)看房子的角度大小也就不一樣

當(dāng)元素沒(méi)有設(shè)置perspective(length)時(shí)，所有后代元素被壓縮在同一個(gè)二維平面上，不存在景深的效果。如果設(shè)置perspective(length)后，將會(huì)看到三維的效果。默認(rèn)的透視視角中心在容器

總結(jié)：呈現(xiàn)3d效果需要3部分

1.  父元素或者當(dāng)前運(yùn)動(dòng)元素上設(shè)置透視角perspective，perspective屬性的值決定了3D效果的強(qiáng)度
2. 3D視圖，設(shè)置在父元素上，子元素都可以相對(duì)與父元素的平面進(jìn)行3d變形操作
3. 3D變形函數(shù)，translate3d、scale3d、rotateX、rotateY、rotateZ等等

知識(shí)點(diǎn)挺多，可以查詢(xún)相關(guān)具體的資料。參考右邊的代碼，便于理解