您好,登錄后才能下訂單哦!
這篇文章主要介紹“怎么用css3實現(xiàn)麻將篩子3D翻轉特效”,在日常操作中,相信很多人在怎么用css3實現(xiàn)麻將篩子3D翻轉特效問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”怎么用css3實現(xiàn)麻將篩子3D翻轉特效”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!
css3使我們能夠跳出2d空間,實現(xiàn)3維空間的動畫效果,這里給出一個自動翻轉的3d色子動畫效果制作過程。
第一步,首先進行HTML的布局,對于3D效果,布局有一定的規(guī)律,代碼如下:
XML/HTML Code復制內(nèi)容到剪貼板
<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,代碼如下:
CSS Code復制內(nèi)容到剪貼板
#outer{
/*定義視距*/
-webkit-perspective:500px;
-WebKit-perspective-origin: 50% 50%;
-moz-perspective:500px;
-moz-perspective-origin: 50% 50%;
overflow: hidden;
}
這里的perspective表示的是透過這個三維場景看到里面的三維效果的距離,值越大看到的效果越遠,值越小,看到的效果越近。perspective-origin表示的是相對于瀏覽器哪個角度去觀察三維圖形,第一個參數(shù)表示X軸方向,第二個參數(shù)表示Y軸方向,可以使用單位值px,也可以使用百分比。為了達到兼容ff和chrome的目的,所以給相應的CSS名稱前加上moz和WebKit前綴。這里有必要說一下css3中的坐標定義,如下:
在css3中,X軸正方向向右,Y軸正方向向下,Z軸正方向由屏幕內(nèi)伸向屏幕外,這和立體幾何中的坐標系定義不同。
第三步,為id為group的div設置css屬性,這個div主要是將色子的6個平面組合在一起,便于定義整體動畫效果,代碼如下:
C# Code復制內(nèi)容到剪貼板
#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屬性,代碼如下:
CSS Code復制內(nèi)容到剪貼板
.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屬性
第一個平面:
CSS Code復制內(nèi)容到剪貼板
#page1{
background-color: #10a6ce;
line-height: 100px;
}
為了區(qū)分每個平面,顯示出3D效果,這里需要將相鄰的div進行不同背景色的設置,第一個div默認位于XY平面,不作變換
第二個平面:
CSS Code復制內(nèi)容到剪貼板
#page2{
background-color: #0073b3;
-webkit-transform-origin:rightright;
-webkit-transform:rotateY(-90deg);
-moz-transform-origin:rightright;
-moz-transform:rotateY(-90deg);
line-height: 100px;
}
這里使用transform-origin來定義該平面以哪個邊開始進行變換,這里以最右邊的邊沿著Y軸繞行-90度,同樣為了兼容加上了前綴
第三個平面:
C# Code復制內(nèi)容到剪貼板
#page3{
background-color: #07beea;
-webkit-transform-origin:left;
-webkit-transform:rotateY(90deg);
-moz-transform-origin:left;
-moz-transform:rotateY(90deg);
line-height: 80px;
}
第四個平面:
CSS Code復制內(nèi)容到剪貼板
#page4{
background-color: #29B4F0;
-webkit-transform-origin:top;
-webkit-transform:rotateX(-90deg);
-moz-transform-origin:top;
-moz-transform:rotateX(-90deg);
line-height: 80px;
}
第五個平面:
CSS Code復制內(nèi)容到剪貼板
#page5{
background-color: #6699cc;
-webkit-transform-origin:bottombottom;
-webkit-transform:rotateX(90deg);
-moz-transform-origin:bottombottom;
-moz-transform:rotateX(90deg);
line-height: 50px;
}
第六個平面:
CSS Code復制內(nèi)容到剪貼板
#page6{
background-color: #10a6ce;
-webkit-transform:translateZ(-200px);
-moz-transform:translateZ(-200px);
line-height: 50px;
}
這個第六個平面需要沿著Z軸進行其寬高長度的平移,已達到連接其他平面的目的第六步,定義關鍵幀動畫,代碼如下:
CSS Code復制內(nèi)容到剪貼板
@-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%的時間內(nèi),沿著X軸再進行360度旋轉,這樣完成一次動畫效果,同樣為了兼容,給關鍵幀keyframes前面加上了前綴
第七步,在id為group的div中使用CSS調(diào)用前面定義的關鍵幀動畫,這里由于需要改色子六個平面同時發(fā)生變換,所以需要在六個平面的父div上調(diào)用動畫.
CSS Code復制內(nèi)容到剪貼板
#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屬性,表示調(diào)用名為scroll的動畫,一次動畫完成時間為8s,動畫變換的速度為勻速,立即開始執(zhí)行動畫并進行無限動畫效果的循環(huán)。
到此,關于“怎么用css3實現(xiàn)麻將篩子3D翻轉特效”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續(xù)學習更多相關知識,請繼續(xù)關注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。