一款基于css3的散子3D翻转特效_html/css_WEB-ITnose
css3使我们能够跳出2d空间，实现3维空间的动画效果，这里给出一个自动翻转的3d色子动画效果制作过程。
第一步，首先进行HTML的布局，对于3D效果，布局有一定的规律，代码如下：
<body><div id="outer"> <div id="group"> <div class="page" id="page1">.</div> <div class="page" id="page2">..</div> <div class="page" id="page3">...</div> <div class="page" id="page4">....</div> <div class="page" id="page5">.....</div> <div class="page" id="page6">......</div> </div></div></body>
在body中定义一个叫做outer的div，它是最外层的div，用来提供一个3D场景，可以认为它是一个3D图形的展示平台，只有定义了这样一个div，才能够展示3D图形，此外定义一个class为group的div，用来盛放色子的六个平面，将它们组合在一起。最后再定义6个平行的div，表示色子的六个平面。
第二步，定义三维场景的css,代码如下：
#outer{ /*定义视距*/ -webkit-perspective:500px; -WebKit-perspective-origin: 50% 50%; -moz-perspective:500px; -moz-perspective-origin: 50% 50%; overflow: hidden; }这里的perspective表示的是透过这个三维场景看到里面的三维效果的距离，值越大看到的效果越远，值越小，看到的效果越近。perspective-origin表示的是相对于浏览器哪个角度去观察三维图形，第一个参数表示X轴方向，第二个参数表示Y轴方向，可以使用单位值px,也可以使用百分比。为了达到兼容ff和chrome的目的，所以给相应的CSS名称前加上moz和WebKit前缀。这里有必要说一下css3中的坐标定义，如下：
在css3中，X轴正方向向右，Y轴正方向向下，Z轴正方向由屏幕内伸向屏幕外，这和立体几何中的坐标系定义不同。
第三步，为id为group的div设置css属性，这个div主要是将色子的6个平面组合在一起，便于定义整体动画效果，代码如下：
#group{ width: 200px; height: 200px; position: relative; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; margin: 200px auto; }这里定义了该div的宽高，并定义其position为relative，便于其中的六个平面相对于这个div进行绝对定位，同时transform-style:preserve-3d这个属性告诉浏览器，所有transform变换都是在3D空间中的变换，而不是在2D空间中，同样为了兼容加上了前缀。
第四步，定义每个平面div的通用page属性，即每个色子平面共同的CSS属性，代码如下：
.page{ width: 200px; height: 200px; position: absolute; border-radius: 20px; text-align: center; font-weight: bold; opacity: 0.5; overflow: hidden; filter:alpha(opacity=50); font-size:150px; word-break:break-all; word-wrap:break-word; }这里定义了每个平面的宽高和其父div group的宽高相同，进行绝对定位，（只有绝对定位了，让其脱离文档流，才能够应用transform3D变换效果，否则只能在2D空间变换），需要说明的是word-break:break-all;word-wrap:break-word;这两句
第五步，定义每个平面的div的CSS属性
第一个平面：
#page1{background-color: #10a6ce;line-height: 100px;}
为了区分每个平面，显示出3D效果，这里需要将相邻的div进行不同背景色的设置，第一个div默认位于XY平面，不作变换
第二个平面：
#page2{ background-color: #0073b3; -webkit-transform-origin:right; -webkit-transform:rotateY(-90deg); -moz-transform-origin:right; -moz-transform:rotateY(-90deg); line-height: 100px; }这里使用transform-origin来定义该平面以哪个边开始进行变换，这里以最右边的边沿着Y轴绕行-90度，同样为了兼容加上了前缀
第三个平面：
#page3{ background-color: #07beea; -webkit-transform-origin:left; -webkit-transform:rotateY(90deg); -moz-transform-origin:left; -moz-transform:rotateY(90deg); line-height: 80px; }第三个平面：
#page4{ background-color: #29B4F0; -webkit-transform-origin:top; -webkit-transform:rotateX(-90deg); -moz-transform-origin:top; -moz-transform:rotateX(-90deg); line-height: 80px; }第五个平面：
#page5{background-color: #6699cc;-webkit-transform-origin:bottom;-webkit-transform:rotateX(90deg);-moz-transform-origin:bottom;-moz-transform:rotateX(90deg);line-height: 50px;}第六个平面：
#page6{background-color: #10a6ce;-webkit-transform:translateZ(-200px);-moz-transform:translateZ(-200px);line-height: 50px;}这个第六个平面需要沿着Z轴进行其宽高长度的平移，已达到连接其他平面的目的
第六步，定义关键帧动画，代码如下：
@-moz-keyframes scroll { 0% { -moz-transform:rotateY(0deg) rotateX(0deg) ; } 50% { -moz-transform:rotateY(360deg) rotateX(0deg) ; } 100% { -moz-transform:rotateY(360deg) rotateX(360deg); } } @-webkit-keyframes scroll { 0% { -webkit-transform:rotateY(0deg) rotateX(0deg) ; } 50% { -webkit-transform:rotateY(360deg) rotateX(0deg) ; } 100% { -webkit-transform:rotateY(360deg) rotateX(360deg); } }这里的动画分为两个阶段，从0%到50%，该色子沿着Y轴进行360度旋转，从50%到100%的时间内，沿着X轴再进行360度旋转，这样完成一次动画效果，同样为了兼容，给关键帧keyframes前面加上了前缀
第七步，在id为group的div中使用CSS调用前面定义的关键帧动画，这里由于需要改色子六个平面同时发生变换，所以需要在六个平面的父div上调用动画
#group{ width: 200px; height: 200px; position: relative; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; margin: 200px auto; -webkit-animation:scroll 8s linear 0s infinite; -moz-animation:scroll 8s linear 0s infinite; }在第三步的结果上加上了animation:scroll 8s linear 0s infinite;CSS属性，表示调用名为scroll的动画，一次动画完成时间为8s,动画变换的速度为匀速，立即开始执行动画并进行无限动画效果的循环。
在线预览 源码下载
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
了解HTML，CSS和JavaScript：初學者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML：結構，CSS：樣式，JavaScript：行為
Apr 18, 2025 am 12:09 AM
HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。
HTML，CSS和JavaScript的未來：網絡開發趨勢
Apr 19, 2025 am 12:02 AM
HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。
HTML的未來：網絡設計的發展和趨勢
Apr 17, 2025 am 12:12 AM
HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。
HTML與CSS vs. JavaScript：比較概述
Apr 16, 2025 am 12:04 AM
HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。
HTML：建立網頁的結構
Apr 14, 2025 am 12:14 AM
HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。
HTML與CSS和JavaScript：比較Web技術
Apr 23, 2025 am 12:05 AM
HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。
HTML：是編程語言還是其他？
Apr 15, 2025 am 12:13 AM
HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。
