亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

一款基于css3麻將篩子3D翻轉(zhuǎn)特效的實(shí)例教程

  發(fā)布時(shí)間：2014-12-31 10:05:37   作者：佚名   我要評(píng)論
這篇文章主要為大家介紹了一款基于css3麻將篩子3D翻轉(zhuǎn)特效的實(shí)例教程，css3使我們能夠跳出2d空間，實(shí)現(xiàn)3維空間的動(dòng)畫效果，這里給出一個(gè)自動(dòng)翻轉(zhuǎn)的3d色子動(dòng)畫效果制作過程

　　css3使我們能夠跳出2d空間，實(shí)現(xiàn)3維空間的動(dòng)畫效果，這里給出一個(gè)自動(dòng)翻轉(zhuǎn)的3d色子動(dòng)畫效果制作過程。

　　第一步，首先進(jìn)行HTML的布局，對(duì)于3D效果，布局有一定的規(guī)律，代碼如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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中定義一個(gè)叫做outer的div，它是最外層的div，用來提供一個(gè)3D場(chǎng)景，可以認(rèn)為它是一個(gè)3D圖形的展示平臺(tái)，只有定義了這樣一個(gè)div，才能夠展示3D圖形，此外定義一個(gè)class為group的div，用來盛放色子的六個(gè)平面，將它們組合在一起。最后再定義6個(gè)平行的div，表示色子的六個(gè)平面。

　　第二步，定義三維場(chǎng)景的css,代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  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表示的是透過這個(gè)三維場(chǎng)景看到里面的三維效果的距離，值越大看到的效果越遠(yuǎn)，值越小，看到的效果越近。perspective-origin表示的是相對(duì)于瀏覽器哪個(gè)角度去觀察三維圖形，第一個(gè)參數(shù)表示X軸方向，第二個(gè)參數(shù)表示Y軸方向，可以使用單位值px,也可以使用百分比。為了達(dá)到兼容ff和chrome的目的，所以給相應(yīng)的CSS名稱前加上moz和WebKit前綴。這里有必要說一下css3中的坐標(biāo)定義，如下：

　　　

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

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

C# Code復(fù)制內(nèi)容到剪貼板
  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，便于其中的六個(gè)平面相對(duì)于這個(gè)div進(jìn)行絕對(duì)定位，同時(shí)transform-style:preserve-3d這個(gè)屬性告訴瀏覽器，所有transform變換都是在3D空間中的變換，而不是在2D空間中，同樣為了兼容加上了前綴。

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

CSS Code復(fù)制內(nèi)容到剪貼板
  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.        }  

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

　　第五步，定義每個(gè)平面的div的CSS屬性

　　第一個(gè)平面：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #page1{   
  2. background-color: #10a6ce;   
  3. line-height: 100px;   
  4. }　　  

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

　　第二個(gè)平面：

CSS Code復(fù)制內(nèi)容到剪貼板
  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來定義該平面以哪個(gè)邊開始進(jìn)行變換，這里以最右邊的邊沿著Y軸繞行-90度，同樣為了兼容加上了前綴

　　第三個(gè)平面：

C# Code復(fù)制內(nèi)容到剪貼板
  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.         }  

　　第四個(gè)平面：

CSS Code復(fù)制內(nèi)容到剪貼板
  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.         }  

　　第五個(gè)平面：

CSS Code復(fù)制內(nèi)容到剪貼板
  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. }  

　　第六個(gè)平面：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #page6{   
  2. background-color: #10a6ce;   
  3. -webkit-transform:translateZ(-200px);   
  4. -moz-transform:translateZ(-200px);   
  5. line-height: 50px;   
  6. }  

　　這個(gè)第六個(gè)平面需要沿著Z軸進(jìn)行其寬高長(zhǎng)度的平移，已達(dá)到連接其他平面的目的第六步，定義關(guān)鍵幀動(dòng)畫，代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  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.                }  

　　這里的動(dòng)畫分為兩個(gè)階段，從0%到50%，該色子沿著Y軸進(jìn)行360度旋轉(zhuǎn)，從50%到100%的時(shí)間內(nèi)，沿著X軸再進(jìn)行360度旋轉(zhuǎn)，這樣完成一次動(dòng)畫效果，同樣為了兼容，給關(guān)鍵幀keyframes前面加上了前綴

　　第七步，在id為group的div中使用CSS調(diào)用前面定義的關(guān)鍵幀動(dòng)畫，這里由于需要改色子六個(gè)平面同時(shí)發(fā)生變換，所以需要在六個(gè)平面的父div上調(diào)用動(dòng)畫.

CSS Code復(fù)制內(nèi)容到剪貼板
  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.        }  

　　在第三步的結(jié)果上加上了animation:scroll 8s linear 0s infinite;CSS屬性，表示調(diào)用名為scroll的動(dòng)畫，一次動(dòng)畫完成時(shí)間為8s,動(dòng)畫變換的速度為勻速，立即開始執(zhí)行動(dòng)畫并進(jìn)行無限動(dòng)畫效果的循環(huán)。

相關(guān)文章

最新評(píng)論