ie9及其以下版本完全不支援css 3d transforms技術，opera 12也不支援。具體支援資訊請檢視caniuse.com。
css動畫是當前一種非常火爆的技術，我說的並不是一些簡單的顏色變換或長短屬性變換，我說的是3d變換技術；純css實現的翻滾旋轉立方體就是最典型的例子。網上能找到很多關於css動畫的**，但對於乙個程式設計師來說，真正理解其為什麼會動起來的原理是非常重要的。下面讓我來一步一步的帶你理解網頁中相互巢狀的3d動畫是如何實現的！
假設我們在乙個門框內有一扇門：
html**非常簡單：
複製**
為了開啟這扇門，我們給它新增乙個door--opencss類：
複製**
現在，我們對它使用3d變換技術(通過對它的左側應用transform-origin)屬性：
.door--open
複製**
對於使用css 3d變換，你唯一需要新增的css字首可能只有-webkit-。ie9是完全不支援的，但ie10+是不需要使用字首的。opera 12及其之前版本完全不支援css變換技術，之後的版本在使用-webkit-字首後是支援的。火狐瀏覽器從v16版(2023年)起不需要使用字首。
效果：現在的效果看起來並不是很真實。更真實實現這種效果的css屬性叫做perspective(透視)，它會讓東西看起來近處的大，遠處的小。
perspective屬性必須應用到需要做3d變換的元素的父元素上。在webkit瀏覽器裡，只要是它的祖先元素都行，但在火狐或ie裡只能是父元素。
現在我們要往門框元素上新增乙個frame--realistic類：
複製**
現在我們在其上設定perspective透視屬性。透視屬性的值約小，它就會顯得離你的眼睛越近，這樣，越近的東西會顯得越大，越遠的越小。
.frame--realistic
複製**
我們就得到了下面的效果：
這樣看起來就好多了！但我們可以做得更好！比如，我們可以讓這扇門動起來，並且具有3d效果。我們只需要在html和css裡將door-open類換成door--ani類：
.door--ani
@keyframes doorani
to }
複製**
效果：------
現在，我們還想讓這扇門的門框也以3d的形式動起來。這很簡單，不是嗎？只需要在門框上新增乙個frame--ani類，設定乙個動畫動作，將perspective透視屬性移動到它的父元素上：
html**變成了這樣：
複製**
我們還需要新增下面的css**：
.container--realistic
.frame--ani
@keyframes frameani
to }
複製**
可是，我們得到的效果卻是：
看起來有些怪。看起來門的動畫效果被門框的擺動抵消了。的確，事情就是這樣，因為transform-style屬性(用來告訴瀏覽器乙個具有3d變換屬性的子元素是否附隨父元素的3d變換屬性)的預設值是flat。
這個問題可以通過將其父元素設定transform-style: preserve-3d來糾正。這樣，我們就可以看到更自然的效果了：
但是，ie10/11只支援transform-style的flat值。有時我們會利用這種技術將父元素和子元素通過3d變換串聯起來。
例如，我有乙個稍微傾斜的立方體(沒有頂部和底部面)。html**是：
複製**
.cube
.face
.face:nth-child(1)
.face:nth-child(2)
.face:nth-child(3)
.face:nth-child(4)
複製**
使用這些**(這裡有更詳細的解釋)，我們得到了下面的效果：
如果你使用的是ie，我們需要在對每個面實施3d變換前先清空變換屬性(如果這個立方體的父類也有變換特徵，也需要先清空。)。我將立方體的父元素也處理了，就像下面：
.cube--ie
.face--ie:nth-child(1)
.face--ie:nth-child(2)
.face--ie:nth-child(3)
.face--ie:nth-child(4)
複製**
於是，在ie裡也得到了同樣的效果：
雖然不是很方便，但也不是很糟。**不是很多，也不是很亂…然而，當我們想旋轉這個立方體時卻出現了問題。我們需要使用transform-style: preserve-3d屬性，我們簡單的增加了乙個cube--ani類，這段css**是：
.cube--ani
@keyframes rot }
複製**
可是，對於ie10/11來說，我們無法對立方體自身施加3d變換，我們只能對每個面單獨實施3d變換。這就是說，我們要對所有的面設定變換屬性。這就是說….每個面都要！
.cube--ie
.cube--ani .face--ie:nth-child(1)
@keyframes rot1
}.cube--ani .face--ie:nth-child(2)
@keyframes rot2
}.cube--ani .face--ie:nth-child(3)
@keyframes rot3
}.cube--ani .face--ie:nth-child(4)
@keyframes rot4 }
複製**
這一**，就是為了實現這個效果：
如果這麼多的**只是為了這4個面，那當需要面對100多個麵時，你能想象是多恐怖的一堆**嗎？
你也許會想到上面的門也有這種問題，門的父元素有高度和寬度，是可見。如何在ie裡實現？唯一能讓門和門框在ie裡一起動起來的方案就是修改html**，讓門和門框變成兄弟元素，單獨對它們施加動畫效果。
(英文：how nesting 3d transformed elements works.)
via:
多層巢狀的CSS 3D動畫技術詳解
ie9及其以下版本完全不支援css 3d transforms技術，opera 12也不支援。具體支援資訊請檢視caniuse.com。css動畫是當前一種非常火爆的技術，我說的並不是一些簡單的顏色變換或長短屬性變換，我說的是3d變換技術 純css實現的翻滾旋轉立方體就是最典型的例子。網上能找到很多...
多層巢狀的CSS 3D動畫技術詳解
css動畫是當前一種非常火爆的技術，我說的並不是一些簡單的顏色變換或長短屬性變換，我說的是3d變換技術 純css實現的翻滾旋轉立方體就是最典型的例子。網上能找到很多關於css動畫的 但對於乙個程式設計師來說，真正理解其為什麼會動起來的原理是非常重要的。下面讓我來一步一步的帶你理解網頁中相互巢狀的3d...
css 3d 動畫 相關
transform style preserve 3d 設定3d模式perspective 700px 屬性定義 3d 元素距檢視的距離，以畫素計。該屬性允許您改變 3d 元素檢視 3d 元素的檢視。當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身perspect...