多層巢狀的CSS 3D動畫技術詳解

ie9及其以下版本完全不支援css 3d transforms技術，opera 12也不支援。具體支援資訊請檢視caniuse.com。

css動畫是當前一種非常火爆的技術，我說的並不是一些簡單的顏色變換或長短屬性變換，我說的是3d變換技術；純css實現的翻滾旋轉立方體就是最典型的例子。網上能找到很多關於css動畫的**，但對於乙個程式設計師來說，真正理解其為什麼會動起來的原理是非常重要的。下面讓我來一步一步的帶你理解網頁中相互巢狀的3d動畫是如何實現的！

假設我們在乙個門框內有一扇門：

html**非常簡單：

class
='container'
>
class
='frame'
>
class
='door'
>
div>
div>
div>

為了開啟這扇門，我們給它新增乙個door--opencss類：

class
='container'
>
class
='frame'
>
class
='door door--open'
>
div>
div>
div>

現在，我們對它使用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類：

class
='container'
>
class
='frame frame--realistic'
>
class
='door door--open'
>
div>
div>
div>

現在我們在其上設定perspective透視屬性。透視屬性的值約小，它就會顯得離你的眼睛越近，這樣，越近的東西會顯得越大，越遠的越小。

.frame--realistic

我們就得到了下面的效果：

這樣看起來就好多了！但我們可以做得更好！比如，我們可以讓這扇門動起來，並且具有3d效果。我們只需要在html和css裡將door-open類換成door--ani類：

.door--ani 
@keyframes doorani
to }

效果：

現在，我們還想讓這扇門的門框也以3d的形式動起來。這很簡單，不是嗎？只需要在門框上新增乙個frame--ani類，設定乙個動畫動作，將perspective透視屬性移動到它的父元素上：

html**變成了這樣：

class
='container container--realistic'
>
class
='frame frame--ani'
>
class
='door door--ani'
>
div>
div>
div>

我們還需要新增下面的css**：

.container--realistic .frame--ani @keyframes frameani

to }

可是，我們得到的效果卻是：

看起來有些怪。看起來門的動畫效果被門框的擺動抵消了。的確，事情就是這樣，因為transform-style屬性(用來告訴瀏覽器乙個具有3d變換屬性的子元素是否附隨父元素的3d變換屬性)的預設值是flat。

這個問題可以通過將其父元素設定transform-style: preserve-3d來糾正。這樣，我們就可以看到更自然的效果了：

但是，ie10/11只支援transform-style的flat值。有時我們會利用這種技術將父元素和子元素通過3d變換串聯起來。

例如，我有乙個稍微傾斜的立方體(沒有頂部和底部面)。html**是：

class
='container container--realistic'
>
class
='cube'
>
class
='face'
>
div>
class
='face'
>
div>
class
='face'
>
div>
class
='face'
>
div>
div>
div>

相關的css：

.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.)

多層巢狀的CSS 3D動畫技術詳解

多層巢狀的CSS 3D動畫技術詳解

多層巢狀的CSS 3D動畫技術詳解

css 3d 動畫 相關

相關推薦

css 3d 動畫相關