在圣誕主題中運用了不少的3D視角的效果，比如開窗、3d旋轉，所以需要了解下css中3D變換是如何呈現出來的？

要想實現3D的效果，只需指定一個元素為容器并設置transform-style：preserve-3d，那么它的后代元素便會有3D效果。不過有很多需要注意的地方
坐標系統的 z 軸同時與 x 和 y 軸垂直

1、3D視圖

設置一個元素的transform-style:preserve-3d；只影響這個元素的子元素(如果孫元素也有3d效果，那么還必須給子元素設置preserve-3d)。這樣所有子元素都可以相對與父元素的平面進行3d變形操作。和二維變形一樣，三維變形可以使用transform屬性來設置?？梢酝ㄟ^制定的函數或者通過三維矩陣來對元素變型

可以呈現3d的屬性有，translate3d、scale3d、rotateX、rotateY、rotateZ等等

2、透視/景深效果

perspective(length) 為一個元素設置三維透視的距離。僅作用于元素的后代，而不是其元素本身。簡單的來說就是假想下，當我們看一個房子的時候，比如房子有200米長，在房里里面與在房子外面，看到的角度都是不一樣的，當設置perspective<200的時候，就是我們在房里看，如果perspective>200或者更多的時候，就相當在外面看，而且越遠看房子的角度大小也就不一樣

當元素沒有設置perspective(length)時，所有后代元素被壓縮在同一個二維平面上，不存在景深的效果。如果設置perspective(length)后，將會看到三維的效果。默認的透視視角中心在容器

總結：呈現3d效果需要3部分

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

知識點挺多，可以查詢相關具體的資料。參考右邊的代碼，便于理解