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

2021-10-25 18:25:20 字數 2782 閱讀 6421

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動畫技術詳解

ie9及其以下版本完全不支援css 3d transforms技術,opera 12也不支援。具體支援資訊請檢視caniuse.com。css動畫是當前一種非常火爆的技術,我說的並不是一些簡單的顏色變換或長短屬性變換,我說的是3d變換技術 純css實現的翻滾旋轉立方體就是最典型的例子。網上能找到很多...

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

ie9及其以下版本完全不支援css 3d transforms技術,opera 12也不支援。具體支援資訊請檢視caniuse.com。css動畫是當前一種非常火爆的技術,我說的並不是一些簡單的顏色變換或長短屬性變換,我說的是3d變換技術 純css實現的翻滾旋轉立方體就是最典型的例子。網上能找到很多...

css 3d 動畫 相關

transform style preserve 3d 設定3d模式perspective 700px 屬性定義 3d 元素距檢視的距離,以畫素計。該屬性允許您改變 3d 元素檢視 3d 元素的檢視。當為元素定義 perspective 屬性時,其子元素會獲得透視效果,而不是元素本身perspect...