精品久久久久久人妻无码中文字幕,日本加勒比高清免费观看,国产免费牲交视频免费播放

大家好。今天給大家分享的是通過(guò)CSS3實(shí)現(xiàn)3D旋轉(zhuǎn)木馬動(dòng)畫效果的方法。我不需要多說(shuō)什么。點(diǎn)擊下面的視頻查看效果:

首先，我們?cè)诓僮髦耙欢ㄒ浪脑?。我用動(dòng)畫的形式展示一下它的形成過(guò)程:

原則
如果你還是不明白，我們來(lái)提煉一下:

循序漸進(jìn)
我們可以清楚地看到，所謂的3D立體效果，其實(shí)是由幾個(gè)平面圖形通過(guò)旋轉(zhuǎn)和移動(dòng)組合而成的 ?，F(xiàn)實(shí)中，我們可以用幾張卡片來(lái)模擬。
既然是3D立體效果，那就必須用3D 空完成。網(wǎng)頁(yè)中的3D坐標(biāo)如下圖所示。在CSS中，我們可以讓目標(biāo)對(duì)象沿任意坐標(biāo)軸平移或繞任意坐標(biāo)軸旋轉(zhuǎn)，并根據(jù)需要指定。

頁(yè)面的三維坐標(biāo)
接下來(lái)我們來(lái)看看如何通過(guò)CSS3在一個(gè)網(wǎng)頁(yè)中實(shí)現(xiàn)這種效果。
HTML結(jié)構(gòu):外圍設(shè)置兩層

HTML結(jié)構(gòu)
2 ?；撅L(fēng)格設(shè)定:這里不用多說(shuō)，大家都能看懂。line-height設(shè)置為90px，與后面的內(nèi)容框高度相同，實(shí)現(xiàn)文本垂直居中。

基本風(fēng)格
3 。主體內(nèi)容的一般樣式:這里需要注意的是，position屬性設(shè)置為absolute，可以不設(shè)置具體值，是為了讓9個(gè)小方框重疊在同一個(gè)平面上。

一般風(fēng)格
4 。立體效果設(shè)置:如前所述，要達(dá)到立體效果，每個(gè)內(nèi)容主體都需要進(jìn)行一定程度的旋轉(zhuǎn)和移動(dòng) 。那么問(wèn)題來(lái)了，旋轉(zhuǎn)多少角度，移動(dòng)多遠(yuǎn)？參考下圖從俯視的角度理解這個(gè)問(wèn)題，順便復(fù)習(xí)初中數(shù)學(xué)知識(shí) 。

計(jì)算方法
可以看出，我們需要的旋轉(zhuǎn)角度是:0，40，80，192px ……可以看出，我們需要的旋轉(zhuǎn)角度是:0，40，80，192px

【CSS3之3D輪播動(dòng)畫詳解 css3d動(dòng)畫演示】注意:背景色可以適當(dāng)設(shè)置透明度。每張圖片圍繞Y軸旋轉(zhuǎn)相應(yīng)的角度，然后沿Z軸移動(dòng)210px 。如果先移動(dòng)，再旋轉(zhuǎn)，會(huì)發(fā)現(xiàn)九張圖片是交叉的。
現(xiàn)在刷新頁(yè)面可以獲得以下效果:

哎！好像有那樣的東西。如果你聰明的話，應(yīng)該會(huì)發(fā)現(xiàn)還有兩個(gè)問(wèn)題沒(méi)有解決:一是它還沒(méi)有動(dòng)，二是它看起來(lái)沒(méi)有立體感。所以重點(diǎn)來(lái)了...
5 。移動(dòng):首先我們需要定義一個(gè)動(dòng)畫，然后在需要移動(dòng)的地方引用它。從開(kāi)場(chǎng)效果可以看出，9張圖片組成的整體圍繞Y軸旋轉(zhuǎn)360 。所以我們定義一個(gè)動(dòng)畫為“@關(guān)鍵幀動(dòng)畫名”(具體參考w3school)，0%為初始狀態(tài)，100%為最終狀態(tài)，然后在父元素中引用。