一款基于css3的散子3D翻轉(zhuǎn)特效_html/css_WEB-ITnose
Jun 24, 2016 am 11:51 AM
css3使我們能夠跳出2d空間，實(shí)現(xiàn)3維空間的動(dòng)畫(huà)效果，這里給出一個(gè)自動(dòng)翻轉(zhuǎn)的3d色子動(dòng)畫(huà)效果制作過(guò)程。
第一步，首先進(jìn)行HTML的布局，對(duì)于3D效果，布局有一定的規(guī)律，代碼如下：
<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中定義一個(gè)叫做outer的div，它是最外層的div，用來(lái)提供一個(gè)3D場(chǎng)景，可以認(rèn)為它是一個(gè)3D圖形的展示平臺(tái)，只有定義了這樣一個(gè)div，才能夠展示3D圖形，此外定義一個(gè)class為group的div，用來(lái)盛放色子的六個(gè)平面，將它們組合在一起。最后再定義6個(gè)平行的div，表示色子的六個(gè)平面。
第二步，定義三維場(chǎng)景的css,代碼如下：
#outer{ /*定義視距*/ -webkit-perspective:500px; -WebKit-perspective-origin: 50% 50%; -moz-perspective:500px; -moz-perspective-origin: 50% 50%; overflow: hidden; } 這里的perspective表示的是透過(guò)這個(gè)三維場(chǎng)景看到里面的三維效果的距離，值越大看到的效果越遠(yuǎn)，值越小，看到的效果越近。perspective-origin表示的是相對(duì)于瀏覽器哪個(gè)角度去觀察三維圖形，第一個(gè)參數(shù)表示X軸方向，第二個(gè)參數(shù)表示Y軸方向，可以使用單位值px,也可以使用百分比。為了達(dá)到兼容ff和chrome的目的，所以給相應(yīng)的CSS名稱前加上moz和WebKit前綴。這里有必要說(shuō)一下css3中的坐標(biāo)定義，如下：
在css3中，X軸正方向向右，Y軸正方向向下，Z軸正方向由屏幕內(nèi)伸向屏幕外，這和立體幾何中的坐標(biāo)系定義不同。
第三步，為id為group的div設(shè)置css屬性，這個(gè)div主要是將色子的6個(gè)平面組合在一起，便于定義整體動(dòng)畫(huà)效果，代碼如下：
#group{ width: 200px; height: 200px; position: relative; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; margin: 200px auto; } 這里定義了該div的寬高，并定義其position為relative，便于其中的六個(gè)平面相對(duì)于這個(gè)div進(jìn)行絕對(duì)定位，同時(shí)transform-style:preserve-3d這個(gè)屬性告訴瀏覽器，所有transform變換都是在3D空間中的變換，而不是在2D空間中，同樣為了兼容加上了前綴。
第四步，定義每個(gè)平面div的通用page屬性，即每個(gè)色子平面共同的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; } 這里定義了每個(gè)平面的寬高和其父div group的寬高相同，進(jìn)行絕對(duì)定位，（只有絕對(duì)定位了，讓其脫離文檔流，才能夠應(yīng)用transform3D變換效果，否則只能在2D空間變換），需要說(shuō)明的是word-break:break-all;word-wrap:break-word;這兩句
第五步，定義每個(gè)平面的div的CSS屬性
第一個(gè)平面：
#page1{background-color: #10a6ce;line-height: 100px;}
為了區(qū)分每個(gè)平面，顯示出3D效果，這里需要將相鄰的div進(jìn)行不同背景色的設(shè)置，第一個(gè)div默認(rèn)位于XY平面，不作變換
第二個(gè)平面：
#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來(lái)定義該平面以哪個(gè)邊開(kāi)始進(jìn)行變換，這里以最右邊的邊沿著Y軸繞行-90度，同樣為了兼容加上了前綴
第三個(gè)平面：
#page3{ background-color: #07beea; -webkit-transform-origin:left; -webkit-transform:rotateY(90deg); -moz-transform-origin:left; -moz-transform:rotateY(90deg); line-height: 80px; } 第三個(gè)平面：
#page4{ background-color: #29B4F0; -webkit-transform-origin:top; -webkit-transform:rotateX(-90deg); -moz-transform-origin:top; -moz-transform:rotateX(-90deg); line-height: 80px; } 第五個(gè)平面：
#page5{background-color: #6699cc;-webkit-transform-origin:bottom;-webkit-transform:rotateX(90deg);-moz-transform-origin:bottom;-moz-transform:rotateX(90deg);line-height: 50px;} 第六個(gè)平面：
#page6{background-color: #10a6ce;-webkit-transform:translateZ(-200px);-moz-transform:translateZ(-200px);line-height: 50px;} 這個(gè)第六個(gè)平面需要沿著Z軸進(jìn)行其寬高長(zhǎng)度的平移，已達(dá)到連接其他平面的目的
第六步，定義關(guān)鍵幀動(dòng)畫(huà)，代碼如下：
@-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); } } 這里的動(dòng)畫(huà)分為兩個(gè)階段，從0%到50%，該色子沿著Y軸進(jìn)行360度旋轉(zhuǎn)，從50%到100%的時(shí)間內(nèi)，沿著X軸再進(jìn)行360度旋轉(zhuǎn)，這樣完成一次動(dòng)畫(huà)效果，同樣為了兼容，給關(guān)鍵幀keyframes前面加上了前綴
第七步，在id為group的div中使用CSS調(diào)用前面定義的關(guān)鍵幀動(dòng)畫(huà)，這里由于需要改色子六個(gè)平面同時(shí)發(fā)生變換，所以需要在六個(gè)平面的父div上調(diào)用動(dòng)畫(huà)
#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; } 在第三步的結(jié)果上加上了animation:scroll 8s linear 0s infinite;CSS屬性，表示調(diào)用名為scroll的動(dòng)畫(huà)，一次動(dòng)畫(huà)完成時(shí)間為8s,動(dòng)畫(huà)變換的速度為勻速，立即開(kāi)始執(zhí)行動(dòng)畫(huà)并進(jìn)行無(wú)限動(dòng)畫(huà)效果的循環(huán)。
在線預(yù)覽???源碼下載
? AI ??
Undress AI Tool
??? ???? ??
Undresser.AI Undress
???? ?? ??? ??? ?? AI ?? ?
AI Clothes Remover
???? ?? ???? ??? AI ?????.
Clothoff.io
AI ? ???
Video Face Swap
??? ??? AI ?? ?? ??? ???? ?? ???? ??? ?? ????!
?? ??
??? ??
???++7.3.1
???? ?? ?? ?? ???
SublimeText3 ??? ??
??? ??, ???? ?? ????.
???? 13.0.1 ???
??? PHP ?? ?? ??
???? CS6
??? ? ?? ??
SublimeText3 Mac ??
? ??? ?? ?? ?????(SublimeText3)
HTML ?? ??? ???? ?? ??? ?? ??
Jul 07, 2025 am 02:31 AM
HTML ?? ??? ???? ?? ??? ??? ???? ?? ?? ?? ? ???? ?? ??? ????????. 1. ????? ??? ??? ????? ?? ? ?? ?? (? : ??, ??, ???)? ?? ??? ?????. 2. JavaScript? ?? ?? ? ??? ???? ID? ?? ??? ?? ??? ??? ???? ?? ? ????. 3. CSS? ???? ???, ???, ?? ??? ? ??/?? ?? ??? ???? ???? ??? ???? ??? ??? ??????. 4. ???? ????????? : ???? ? ??? ????? ??? ???? JS ???? ???? ????? ???? ??? ???? ??? ??? ??? ???? ??? ?????. ??? ???????
HTML ?? ?? ??? ?? ?? ??? ??
Jul 09, 2025 am 02:30 AM
HTMLHEAD? ?? ???? SEO, ?? ?? ? ???? ??? ?????. 1. ??? ??? ??? ????, ???? ???? ???? ??????. 2. OpenGraph ? Twitter ?? ??? ???? ?? ?? ??? ????? ??? ?????? ???? ??? ??? ???? ???????. 3. ?? ?? ? ??? ??? ???? ??? ??? ??? ???? ????????. 4. ?? ???, ?? ?? ? ?? ?? ?? ???? ?? ??? ??? ????? ???????.
2025 ? ?????? ??? HTML ????
Jul 08, 2025 am 12:25 AM
Tolearnhtmlin2025, chooSeatUtoriorialThatthatthath and-practicewithmoderndardAndardsandegratescssandjavaScriptBasics.1.
??? ??? ? HTML ????
Jul 10, 2025 pm 02:01 PM
???? ??? HTML ?? ???? ??? ??? ?????? ?? Div Flex ?? ??? ????? ???? ??? ?????? ??? ???????. ??, ?? ???? ?????? ?? CSS? ?? ? ?? ????. ?? ?? ??? ALT ??? ?? ???? ?? URL? ?????? ??? ???? ??? ?? TD? ??????????. ????? ?? ?????? ?? ??? ????? ???????.
HTML ?? ? ?? ??? ???? ??? ??? ?? ???? ???? ??? ??????
Jul 07, 2025 am 02:30 AM
HTML ??? ???? ????? ?? ?? ???? ??? ?? ???? ?? ???? ?? ? ? ????. 1. ??, ??? ?? ?? ??? ?? ??? ? ??? ???? ???? ? ?????. 2. ?? ???? ???? ??? ? ?? ??? ?? ? ? ????. 3. ??? ??? ??? ???? ?????? ??? ??? ? SEO ??? ??????. 4. ??? ??? ?, ??? ??? ??? ????? ??????, ???? ?? ????? ???? ??? ?? ???? ???? ???????. 5. ??? ??? ALT ??? ??? ????. 6. ??? ???? ??? ?? ??? ?? ?? ??? ?? ? ? ????. ? ? ?? ??? ???? ???? ?? ???? ???? ?? ? ???? ???? ? ??????.
???? HTML?? ?? ??? ???? ??? ??????
Jul 09, 2025 am 01:14 AM
??? ??? ??? HTML ?? ??? ??? ????? ?? ?? ?? ?? ???? ?? ?? ? ? ????. ?? ???? ??? ?????. 1. JavaScript? ???? ?? ?? ? ??? ???? ???? ?? ?? ??? ?? ?? ? ???? ???? ????. 2. Formspree? ?? ?? ???? ? ???? ???? ???? ???? ??? ?? ? ???? ??? ?????. 3. LocalStorage? ???? ??? ?? ??? ????? ?? ??? ?? ???? ??? ???? ? ????? ??? ??? ?? ???? ???? ????.
HTML?? ?? ????? ???? ??? ??? ??????
Jul 10, 2025 am 10:58 AM
???, ID, ???, ??? ? ??? HTML?? ?? ????? ???? ??? ?????. ???? ??? ?? ? JavaScript ??? ?????? ?? ?? ??? ??? ??? ???? ? ?????. ID? ?? ?? ? JavaScript ???? ??? ??? ?? ?? ???? ?????. ???? ???? ??? ???? ?? ? ? ??? ?? ???? ????? ??? ???? ???? ????. ??? ??? ??? ?? ???? ???? ? ????, ?? ??? ?? ? ??? ?? ??? ?????. ??? ??? ?? ????? ???? ? ????? ???? ??? ????? ?? ?????. ??? ??? ????? ???? ?? ???? ??? ??? ???? ? ????.
HTML?? ???? ?? ?? ??? ?? ??
Jul 12, 2025 am 12:48 AM
Native Lazy Loading? ?? ???? ????,?? = "???"??? ??? ???? ??? ????? ? ? ????. 1. JavaScript ?? ?? ?????? ???? ??? HTML?? ?? ?????. 2. ??? ??? ? ?? ??? ???? ?? ??, ?? ??? ??? ??? ? ? ?? ???? ?????. 3. ? ?? ?? ?? ???????? ???? ???? ????. 4. ??? ??? ?, ??? ?? ???? ???? ??? ??? ?? ???????. 5. SRCSET ? ?? ??? ?? ?? ? ??? ??? ????????. 6. ??? ??? ???????. ?? ??? ??????? ???? ????. ?? ??? ?? ??? ? ??? JavaScript ???? ?? ? ? ????.
