閒暇之餘看了一些關於css3的3d動畫方面的文章，自己寫了乙個3d骰子旋轉動畫效果，**分享給大家。
先直接上效果圖：
1.首先建立乙個容器
<
divclass
="stage"
>
<
divclass
="club
>
<
divclass
="front"
>
div>
<
divclass
="back"
>
div>
<
divclass
="left"
>
div>
<
divclass
="right"
>
div>
<
divclass
="top"
>
div>
<
divclass
="buttom"
>
div>
div>
div>
2.css樣式
body
/* 使用徑向漸變設定背景顏色 */
html
.stage
.club
.club
div
/* 分別建立骰子的六個面 */
.front
.back
.left
.right
.top
.buttom
/* 建立動畫 */
@-webkit-keyframes
aa
to; }
CSS3動畫 3D旋轉
學了c3之後，簡單做了乙個3d旋轉的小demo.個人親猜測相容chrome firefox opera safari，沒有考慮ie。如果下面 有問題，可以在我的github檢視源 可以檢視網頁效果demo位址。如下 ccs3animation 3drotatetitle charset utf 8 ...
CSS3製作3D輪播翻轉動畫示例
知識點 transform transform style preserve 3d animation perspective charset utf 8 c3製作3d輪播title img box ul,li 定義動畫 webkit keyframes show 50 60 70 80 90 10...
純css3實現旋轉3D立方體骰子
純css3實現旋轉3d立方體骰子 自旋轉型 主要運用css3的 transform，rotate，translate，animation等動畫 以 perspectiveperspective origintransform style 等屬性為輔助 具體實現 如下 container front ...