CSS3動畫結合js實現3D輪播

昨天晚上有個同行提出要做乙個旋轉式的3d輪播圖(下面統稱banner圖)。我就為了幫他看了一下相關的技術貼發現符合要求的很少，所以只能自己去動手寫了。看到有人寫了css3立體旋轉動畫的部落格，我就想把這個動畫拆分成幾個模組來做乙個banner效果可不可以？最後自己動手寫了一下還是可以的。不過這個banner效果還是存在一些bug，因為不是急用所以我也沒有修復。以後有空我會修復的。

html部分**

<

div 
class
="container"
>
<
div 
class
="carouse"
id="carouse"
>
<
div 
class
="pic1"
>1
div>
<
div 
class
="pic2"
>2
div>
<
div 
class
="pic3"
>3
div>
<
div 
class
="pic4"
>4
div>
<
div 
class
="pic5"
>5
div>
<
div 
class
="pic6"
>6
div>
<
div 
class
="pic7"
>7
div>
<
div 
class
="pic8"
>8
div>
<
div 
class
="pic9"
>9
div>
div>
div>
<
div 
class
="btn-group"
>
<
button 
id="prev"
>上乙個
button
>
<
button 
id="next"
>下乙個
button
>
div>

*.container.carouse.carouse div.btn-group.btn-group button.carouse .pic1.carouse .pic2.carouse .pic3.carouse .pic4.carouse .pic5.carouse .pic6.carouse .pic7.carouse .pic8.carouse .pic9

/*=== 下乙個動畫 ===
*/@keyframes to-scroll1 100%}
#carouse1@keyframes to-scroll2 100%}
#carouse2@keyframes to-scroll3 100%}
#carouse3@keyframes to-scroll4 100%}
#carouse4@keyframes to-scroll5 100%}
#carouse5@keyframes to-scroll6 100%}
#carouse6@keyframes to-scroll7 100%}
#carouse7@keyframes to-scroll8 100%}
#carouse8@keyframes to-scroll9 100%}
#carouse9
/*@keyframes to-scroll10 
100%
}#carouse10*/
/*=== 上乙個動畫 ===
*/@keyframes to-scroll21 100%}
#carouse21@keyframes to-scroll22 100%}
#carouse22@keyframes to-scroll23 100%}
#carouse23@keyframes to-scroll24 100%}
#carouse24@keyframes to-scroll25 100%}
#carouse25@keyframes to-scroll26 100%}
#carouse26@keyframes to-scroll27 100%}
#carouse27@keyframes to-scroll28 100%}
#carouse28@keyframes to-scroll29 100%}
#carouse29@keyframes to-scroll30 100%}
#carouse30

var prevbut = document.getelementbyid("prev");

var nextbut = document.getelementbyid("next");
var carouse = document.getelementsbyclassname("carouse")
var state = 1;  //id的變化狀態
prevbut.addeventlistener("click",function
() ) ;
nextbut.addeventlistener("click",function
() ) ;
function
prev()
else
if(state == 2||state == 22)
else
if(state == 3 || state == 23)
else
if(state == 4 || state == 24)
else
if(state == 5||state == 25)
else
if(state == 6 || state == 26)
else
if(state == 7 || state == 27)
else
if(state == 8||state == 28)
else
if(state == 9 || state == 29)
else
if(state == 10 || state == 30)
}function
next() 
else
if(state == 2||state == 22)
else
if(state == 3 || state == 23)
else
if(state == 4 || state == 24)
else
if(state == 5||state == 25)
else
if(state == 6 || state == 26)
else
if(state == 7 || state == 27)
else
if(state == 8||state == 28)
else
if(state == 9 || state == 29)
else
if(state == 10 || state == 30)
}

CSS3動畫 3D旋轉

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

css3之3d動畫呈現

利用css3完成3d效果的簡單呈現 動畫效果用呈現不出來，大家自己動手寫乙個看看吧 新建html lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle head c...

css3動畫效果和3D模型

今天了解了css3的動畫漸變效果，如果我們要對頁面中的某個元素的樣式進行變化，就不用js或jquery苦苦的寫 了，直接用css3的這個transition這個屬性就ok，方便快捷，下面請看demo。我要對某個div操作，例如 當滑鼠移入div中，改變其width height和background...