html5和css3实现的3D滚动特效

今天给大家带来一款html5和css3实现的3D滚动特效。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

Html代码  收藏代码
  1. <div class="container">  
  2.         <div class="cube">  
  3.             <div class="side side1">  
  4.             </div>  
  5.             <div class="side side2">  
  6.             </div>  
  7.             <div class="side side3">  
  8.             </div>  
  9.             <div class="side side4">  
  10.             </div>  
  11.             <div class="side side5">  
  12.             </div>  
  13.             <div class="side side6">  
  14.             </div>  
  15.         </div>  
  16.     </div>  
  17.     <div class="container container2">  
  18.         <div class="cube">  
  19.             <div class="side side1">  
  20.             </div>  
  21.             <div class="side side2">  
  22.             </div>  
  23.             <div class="side side3">  
  24.             </div>  
  25.             <div class="side side4">  
  26.             </div>  
  27.             <div class="side side5">  
  28.             </div>  
  29.             <div class="side side6">  
  30.             </div>  
  31.         </div>  
  32.     </div>  

 css3代码：

Html代码  收藏代码
  1. body{  
  2.   height:100vh;  
  3. }  
  4. .container{  
  5.   position:absolute;  
  6.   height:100px;  
  7.   width:100px;  
  8.   left:33%;  
  9.   top:50%;  
  10.   -webkit-transform: translateX(-50%) translateY(-50%);  
  11.           transform: translateX(-50%) translateY(-50%);  
  12.   -webkit-perspective:400px;  
  13.           perspective:400px;  
  14. }  
  15. .cube{  
  16.   height:100px;  
  17.   widht:100px;  
  18.   -webkit-transform-origin:50% 50%;  
  19.           transform-origin:50% 50%;  
  20.   -webkit-transform-style:preserve-3d;  
  21.           transform-style:preserve-3d;  
  22.   -webkit-animation:rotate 4s infinite ease-in-out;  
  23.           animation:rotate 4s infinite ease-in-out;  
  24.   
  25. }  
  26. .side{  
  27.   position:absolute;  
  28.   display:block;  
  29.   height:100px;  
  30.   width:100px;  
  31. }  
  32. .side1{  
  33.   background:#41C3AC;  
  34.   -webkit-transform:translateZ(100px);  
  35.           transform:translateZ(100px);  
  36. }  
  37. .side2{  
  38.   background:#FF884D;  
  39.   -webkit-transform:rotateY(90deg) translateZ(100px);  
  40.           transform:rotateY(90deg) translateZ(100px);  
  41. }  
  42. .side3{  
  43.   background:#32526E;  
  44.   -webkit-transform:rotateY(180deg) translateZ(100px);  
  45.           transform:rotateY(180deg) translateZ(100px);  
  46. }  
  47. .side4{  
  48.   background:#65A2C5;  
  49.   -webkit-transform:rotateY(-90deg) translateZ(100px);  
  50.           transform:rotateY(-90deg) translateZ(100px);  
  51. }  
  52. .side5{  
  53.   background:#FFCC5C;  
  54.   -webkit-transform:rotateX(90deg) translateZ(100px);  
  55.           transform:rotateX(90deg) translateZ(100px);  
  56. }  
  57. .side6{  
  58.   background:#FF6B57;  
  59.   -webkit-transform:rotateX(-90deg) translateZ(100px);  
  60.           transform:rotateX(-90deg) translateZ(100px);  
  61. }  
  62.   
  63. @-webkit-keyframes rotate{  
  64.   0%{  
  65.     -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);  
  66.   }  
  67.   33.33%{  
  68.      -webkit-transform:rotateX(360deg) rotateY(0deg)  rotateZ(0deg);      
  69.   }  
  70.   66.66%{  
  71.      -webkit-transform:rotateX(360deg) rotateY(360deg)  rotateZ(0deg);  
  72.   }  
  73.   100%{  
  74.      -webkit-transform:rotateX(360deg) rotateY(360deg)  rotateZ(360deg);  
  75.   }  
  76. }  
  77. @keyframes rotate{  
  78.   0%{  
  79.     transform:rotateX(0deg) rotateY(0deg);  
  80.   }  
  81.   50%{  
  82.     transform:rotateX(360deg) rotateY(0deg);      
  83.   }  
  84.   100%{  
  85.     transform:rotateX(360deg) rotateY(360deg);  
  86.   }  
  87. }  
  88. a{  
  89.   font-family:helvetica;  
  90.   color:#428bca;  
  91.   text-align:center;  
  92.   display:block;  
  93. }  
  94.   
  95. .container2{  
  96.   left:66%;  
  97. }  
  98. .container2 .side{  
  99.   border-radius:50%;  
  100. }  
posted @ 2014-12-17 14:38  super1234  阅读(1321)  评论(1)  编辑  收藏  举报