亚洲AV在色伊人,日韩亚洲香蕉伊人,国产精品第一区二区三区

第1章效果預覽與介紹
視頻：1-1 課程簡介(03:16)

第2章設計思路與蘊涵的知識點
視頻：2-1 整體介紹(01:40)
視頻：2-2 編程思路(02:15)

第8章最終效果與總結
編程：8-1 最終效果與總結

3D旋轉特效(上)

3D旋轉特效的實現也是很簡單的，開發者可以有許多種方式來實現它，高級瀏覽器支持實現3D空間的能力，所以這里直接采用了css3來實現。3D旋轉特效的所有代碼全部用JS封裝好了，參考右邊代碼區域。

實現原理：

先看結構，因為是3D視角所以在結構上需有一個透視參考點，也就是舞臺節點上設置perspective，然后在容器父節點上設置preserve-3d屬性，下面就是最基本的結構

舞臺
    容器
        圖片
        圖片
        圖片

節點#carousel中有3個面，其中有2個面是有側旋轉的立體效果，這里可以通過rotateY的設置達到這個效果，旋轉的面是平均分布的，那么每個面需要在上一個面的基礎上多旋轉120度（360 / 3）

transform:rotateY(0deg)
transform:rotateY(120deg)
transform:rotateY(240deg)

給3個面設置不同rotateY值的實際效果，通過增加與刪除preserve-3d設置后的效果對比，比較直觀

去掉preserve-3d后，如下圖

增加preserve-3d后，如下圖

其實上圖的基本布局效果已經出來了，但是因為元素都旋轉是以自身的中心點為參考點，默認下中心點都是在正中間，所以感覺都是在一個范圍區域變化

下一節將要學習如何拉開3d距離

任務

請在index.html文件代碼16行出填出任務代碼

設置舞臺元素的透視點為500

?不會了怎么辦: perspective: 500px;

index.html

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>圣誕主題</title> <style type="text/css"> * { margin: 0; padding: 0; } </style> </head> <body> <div style=" position: absolute; left: 6.8rem; top: 3.5rem;"> <h6>去掉preserve-3d后，如下圖</h6> <figure style="width: 4rem; transition: 1s;"> <figure style="width:100%;transform:rotateY(0deg) ;position:absolute;"><img src="http://img1.sycdn.imooc.com//5662e29a0001905a14410901.png" style="width:100%;height:100%;"></figure> <figure style="width:100%;transform:rotateY(120deg) ;position:absolute;"><img src="http://img1.sycdn.imooc.com//5662e2960001f16314410901.png" style="width:100%;height:100%;"></figure> <figure style="width:100%;transform:rotateY(240deg) ;position:absolute;"><img src="http://img1.sycdn.imooc.com//5662e26f00010dea14410901.png" style="width:100%;height:100%;"></figure> </figure> </div> <div style=" position: absolute; left: 6.8rem; top: 15.5rem;"> <h6>增加preserve-3d后，如下圖</h6> <figure style="width: 4rem; transform-style: preserve-3d; transition: 1s;"> <figure style="width:100%;transform:rotateY(0deg) ;position:absolute;"><img src="http://img1.sycdn.imooc.com//5662e29a0001905a14410901.png" style="width:100%;height:100%;"></figure> <figure style="width:100%;transform:rotateY(120deg) ;position:absolute;"><img src="http://img1.sycdn.imooc.com//5662e2960001f16314410901.png" style="width:100%;height:100%;"></figure> <figure style="width:100%;transform:rotateY(240deg) ;position:absolute;"><img src="http://img1.sycdn.imooc.com//5662e26f00010dea14410901.png" style="width:100%;height:100%;"></figure> </figure> </div> <script type="text/javascript"> //rem設置 (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; //寬與高度 document.body.style.height = clientWidth * (900 / 1440) + "px" }; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script> </body> </html>

提問題

提交

其他問答

查看更多本節問答

寫筆記

公開筆記

提交

全屏

請驗證，完成請求

由于請求次數過多，請先驗證，完成再次請求

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

6-3 3D旋轉特效(上)

3D旋轉特效(上)

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

6-3 3D旋轉特效(上)

熱搜

最近搜索清空

3D旋轉特效(上)

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～