CSS 深入 3D 動畫

web 技術飛速發展，但是絕大數技術人員並沒有跟上其腳步，博主就是其中一員。當我們還在琢磨上一代技術時，那些技術前沿的弄潮兒開始打造新一代技術。這裡聊一聊非高頻卻十分炫酷的 3d 技術，使用 css3 即可實現。

在說到三維之前，我們先聊一聊二維。

二維很好理解，即平面。我們使用 x 軸和 y 軸就可以輕鬆表示。

三維是在二維的基礎上增加了乙個維度。這個稍微有點難理解，可以參考下圖：

我們在網頁裡面構造乙個正方形非常簡單，但是如果想構造乙個正方體，那就麻煩了。正常情況下，頁面是乙個二維空間，所以無法構造立體圖。如果想構造立方體，我們必須在三維空間裡面。

先認識下 css3 中提供的一些 3d 屬性：

這個屬性表示眼睛離物體的距離，並且這個值是非負的。在 web 3d 的世界中，該值表示螢幕離物體的距離。

由此不難理解，該值越大，介面呈現的物體越小。該值越小，介面呈現的物體越大。

表示視線滅點的位置，預設值是物體的中心。可以簡單理解為視線的焦點。

表示空間內元素的展示模式，有平面和立體兩種，flat 和 preserve-3d。

perspective、perspective-origin、transform-style這三個屬性都作用于父元素，即 3d 物體的元素的上級元素。

理論與實踐結合，我們才能更好的理解。這裡結合兩個小例子，進一步鞏固前面的理論基礎。

正方體的實現思路就是利用六個面，經過旋轉變化組合而成。

前後兩個面，通過 z 軸方向的偏移可以得到。

左右兩個面，需要先經過一次 y 軸方向的旋轉，再經過 z 軸方向的偏移。

上下兩個面，需要先經過一次 x 軸方向的旋轉，再經過 z 軸方向的偏移。

關鍵**

.c6效果圖就是博文開頭那張，為了方便閱讀，這裡也放置一張。

思路和上個正方體一樣，細節可以參考**。

class

="container"
>
>
艾菲爾鐵塔h2
上一張button
>
class
="next"
>
下一張button
>
div>
div>
.container

li:nth-child(1)

li:nth-child(2)

li:nth-child(3)

li:nth-child(4)

li:nth-child(5)

li:nth-child(6)

imgbutton

button:last-child

h2

var cities =

,'故宮'

,'凱旋門'

,'長城'

,'黃鶴樓'

,'雪梨歌劇院'

]var prev = document.

queryselector

('.prev');

var next = document.

queryselector

('.next');

var ul = document.

queryselector

('ul');

var h2 = document.

queryselector

('h2');

var deg =

0var i =

0prev.

addeventlistener

('click'

,function()

h2.innerhtml = cities[i]

ul.style.transform =

`rotatey(

$deg)`})

next.

addeventlistener

('click'

,function()

h2.innerhtml = cities[i]

ul.style.transform =

`rotatey(

$deg)`

})這裡主要是博主自己的學習記錄，很多細節如果有不明白的，可以參考：

CSS 動畫 3D翻頁動畫

doctype html html lang en head meta charset utf 8 meta name viewport content width device width,initial scale 1.0 title create effect of 3d title styl...

純css實現3D動畫

css動畫的某些屬性可以實現非常炫酷的3d效果，貼出乙個例子，可直接看到效果，用到了css的3d轉換和動畫。doctype html html head meta charset utf 8 meta name viewport content width device width,initial ...

CSS3動畫 3D旋轉

學了c3之後，簡單做了乙個3d旋轉的小demo.個人親猜測相容chrome firefox opera safari，沒有考慮ie。如果下面 有問題，可以在我的github檢視源 可以檢視網頁效果demo位址。如下 ccs3animation 3drotatetitle charset utf 8 ...