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

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
}

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

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

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

css 3d 動畫 相關

相關推薦

css 3d 動畫相關