99偷拍视频精品区一区二,口述久久久久久久久久久久,国产精品夫妇激情啪发布,成人永久免费网站在线观看,国产精品高清免费在线,青青草在线观看视频观看,久久久久久国产一区,天天婷婷久久18禁,日韩动漫av在线播放直播

怎么用css3實現麻將篩子3D翻轉特效

這篇文章主要介紹“怎么用css3實現麻將篩子3D翻轉特效”，在日常操作中，相信很多人在怎么用css3實現麻將篩子3D翻轉特效問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用css3實現麻將篩子3D翻轉特效”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

公司主營業務：成都做網站、成都網站制作、移動網站開發等業務。幫助企業客戶真正實現互聯網宣傳，提高企業的競爭能力。創新互聯是一支青春激揚、勤奮敬業、活力青春激揚、勤奮敬業、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創新互聯推出萊蕪免費做網站回饋大家。

css3使我們能夠跳出2d空間，實現3維空間的動畫效果，這里給出一個自動翻轉的3d色子動畫效果制作過程。

怎么用css3實現麻將篩子3D翻轉特效

第一步，首先進行HTML的布局，對于3D效果，布局有一定的規律，代碼如下：

XML/HTML Code復制內容到剪貼板

  1. <body>  

  2. <div id="outer">  

  3.     <div id="group">  

  4.         <div class="page" id="page1">.</div>  

  5.         <div class="page" id="page2">..</div>  

  6.         <div class="page" id="page3">...</div>  

  7.         <div class="page" id="page4">....</div>  

  8.         <div class="page" id="page5">.....</div>  

  9.         <div class="page" id="page6">......</div>  

  10.   

  11.     </div>  

  12.   

  13. </div>  

  14. </body>  

在body中定義一個叫做outer的div，它是最外層的div，用來提供一個3D場景，可以認為它是一個3D圖形的展示平臺，只有定義了這樣一個div，才能夠展示3D圖形，此外定義一個class為group的div，用來盛放色子的六個平面，將它們組合在一起。最后再定義6個平行的div，表示色子的六個平面。

第二步，定義三維場景的css,代碼如下：

CSS Code復制內容到剪貼板

  1. #outer{   

  2.            /*定義視距*/  

  3.            -webkit-perspective:500px;   

  4.            -WebKit-perspective-origin: 50% 50%;   

  5.   

  6.            -moz-perspective:500px;   

  7.            -moz-perspective-origin: 50% 50%;   

  8.   

  9.            overflow: hidden;   

  10.        }  

這里的perspective表示的是透過這個三維場景看到里面的三維效果的距離，值越大看到的效果越遠，值越小，看到的效果越近。perspective-origin表示的是相對于瀏覽器哪個角度去觀察三維圖形，第一個參數表示X軸方向，第二個參數表示Y軸方向，可以使用單位值px,也可以使用百分比。為了達到兼容ff和chrome的目的，所以給相應的CSS名稱前加上moz和WebKit前綴。這里有必要說一下css3中的坐標定義，如下：

怎么用css3實現麻將篩子3D翻轉特效

在css3中，X軸正方向向右，Y軸正方向向下，Z軸正方向由屏幕內伸向屏幕外，這和立體幾何中的坐標系定義不同。

第三步，為id為group的div設置css屬性，這個div主要是將色子的6個平面組合在一起，便于定義整體動畫效果，代碼如下：

C# Code復制內容到剪貼板

  1. #group{  

  2.             width: 200px;   

  3.             height: 200px;   

  4.             position: relative;   

  5.             -webkit-transform-style:preserve-3d;   

  6.   

  7.             -moz-transform-style:preserve-3d;   

  8.             margin: 200px auto;   

  9.   

  10.         }  

這里定義了該div的寬高，并定義其position為relative，便于其中的六個平面相對于這個div進行絕對定位，同時transform-style:preserve-3d這個屬性告訴瀏覽器，所有transform變換都是在3D空間中的變換，而不是在2D空間中，同樣為了兼容加上了前綴。

　第四步，定義每個平面div的通用page屬性，即每個色子平面共同的CSS屬性，代碼如下：

CSS Code復制內容到剪貼板

  1. .page{   

  2.            width: 200px;   

  3.            height: 200px;   

  4.            position: absolute;   

  5.            border-radius: 20px;   

  6.            text-align: center;   

  7.            font-weight: bold;   

  8.            opacity: 0.5;   

  9.            overflow: hidden;   

  10.            filter:alpha(opacity=50);   

  11.            font-size:150px;   

  12.            word-break:break-all;   

  13.            word-wrap:break-word;   

  14.        }  

這里定義了每個平面的寬高和其父div group的寬高相同，進行絕對定位，（只有絕對定位了，讓其脫離文檔流，才能夠應用transform3D變換效果，否則只能在2D空間變換），需要說明的是word-break:break-all;word-wrap:break-word;這兩句

第五步，定義每個平面的div的CSS屬性

第一個平面：

CSS Code復制內容到剪貼板

  1. #page1{   

  2. background-color: #10a6ce;   

  3. line-height: 100px;   

  4. }　　  

為了區分每個平面，顯示出3D效果，這里需要將相鄰的div進行不同背景色的設置，第一個div默認位于XY平面，不作變換

第二個平面：

CSS Code復制內容到剪貼板

  1. #page2{   

  2.            background-color: #0073b3;   

  3.            -webkit-transform-origin:rightright;   

  4.            -webkit-transform:rotateY(-90deg);   

  5.            -moz-transform-origin:rightright;   

  6.            -moz-transform:rotateY(-90deg);   

  7.            line-height: 100px;   

  8.        }  

這里使用transform-origin來定義該平面以哪個邊開始進行變換，這里以最右邊的邊沿著Y軸繞行-90度，同樣為了兼容加上了前綴

第三個平面：

C# Code復制內容到剪貼板

  1. #page3{  

  2.             background-color: #07beea;   

  3.             -webkit-transform-origin:left;   

  4.             -webkit-transform:rotateY(90deg);   

  5.             -moz-transform-origin:left;   

  6.             -moz-transform:rotateY(90deg);   

  7.             line-height: 80px;   

  8.         }  

第四個平面：

CSS Code復制內容到剪貼板

  1. #page4{   

  2.             background-color: #29B4F0;   

  3.             -webkit-transform-origin:top;   

  4.             -webkit-transform:rotateX(-90deg);   

  5.             -moz-transform-origin:top;   

  6.             -moz-transform:rotateX(-90deg);   

  7.             line-height: 80px;   

  8.         }  

第五個平面：

CSS Code復制內容到剪貼板

  1. #page5{   

  2. background-color: #6699cc;   

  3. -webkit-transform-origin:bottombottom;   

  4. -webkit-transform:rotateX(90deg);   

  5. -moz-transform-origin:bottombottom;   

  6. -moz-transform:rotateX(90deg);   

  7. line-height: 50px;   

  8. }  

第六個平面：

CSS Code復制內容到剪貼板

  1. #page6{   

  2. background-color: #10a6ce;   

  3. -webkit-transform:translateZ(-200px);   

  4. -moz-transform:translateZ(-200px);   

  5. line-height: 50px;   

  6. }  

這個第六個平面需要沿著Z軸進行其寬高長度的平移，已達到連接其他平面的目的第六步，定義關鍵幀動畫，代碼如下：

CSS Code復制內容到剪貼板

  1. @-moz-keyframes scroll {   

  2.   

  3.            0% {   

  4.                -moz-transform:rotateY(0deg) rotateX(0deg) ;   

  5.   

  6.            }   

  7.   

  8.            50% {   

  9.                -moz-transform:rotateY(360deg) rotateX(0deg) ;   

  10.            }   

  11.   

  12.            100% {   

  13.                -moz-transform:rotateY(360deg) rotateX(360deg);   

  14.            }   

  15.   

  16.        }   

  17.   

  18.        @-webkit-keyframes scroll {   

  19.   

  20.            0% {   

  21.                -webkit-transform:rotateY(0deg) rotateX(0deg) ;   

  22.   

  23.            }   

  24.   

  25.            50% {   

  26.                -webkit-transform:rotateY(360deg) rotateX(0deg) ;   

  27.            }   

  28.   

  29.            100% {   

  30.                -webkit-transform:rotateY(360deg) rotateX(360deg);   

  31.            }   

  32.   

  33.                }  

這里的動畫分為兩個階段，從0%到50%，該色子沿著Y軸進行360度旋轉，從50%到100%的時間內，沿著X軸再進行360度旋轉，這樣完成一次動畫效果，同樣為了兼容，給關鍵幀keyframes前面加上了前綴

第七步，在id為group的div中使用CSS調用前面定義的關鍵幀動畫，這里由于需要改色子六個平面同時發生變換，所以需要在六個平面的父div上調用動畫.

CSS Code復制內容到剪貼板

  1. #group{   

  2.            width: 200px;   

  3.            height: 200px;   

  4.            position: relative;   

  5.            -webkit-transform-style:preserve-3d;   

  6.            -moz-transform-style:preserve-3d;   

  7.            margin: 200px auto;   

  8.            -webkit-animation:scroll 8s linear 0s infinite;   

  9.            -moz-animation:scroll 8s linear 0s infinite;   

  10.        }  

在第三步的結果上加上了animation:scroll 8s linear 0s infinite;CSS屬性，表示調用名為scroll的動畫，一次動畫完成時間為8s,動畫變換的速度為勻速，立即開始執行動畫并進行無限動畫效果的循環。

到此，關于“怎么用css3實現麻將篩子3D翻轉特效”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注創新互聯網站，小編會繼續努力為大家帶來更多實用的文章！

當前文章：怎么用css3實現麻將篩子3D翻轉特效
轉載注明：http://www.yijiale78.com/article44/pcsehe.html

成都網站建設公司_創新互聯，為您提供網站內鏈、Google、虛擬主機、移動網站建設、搜索引擎優化、響應式網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

網站建設網站維護公司