js實現(xiàn)3d懸浮效果
更新時間:2017年02月16日 10:19:31 作者:hd564964
本文主要分享了js實現(xiàn)3d懸浮效果的示例代碼,具有很好的參考價值,下面跟著小編一起來看下吧
效果如下:
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0; padding: 0;} ul,li{list-style: none;} .container{perspective: 1300;-webkit-perspective:1300;} .boxList{position:absolute;width: 630px;height:630px;left:50%;margin-left:-315px; -webkit-transform-style: preserve-3d;transform-style: preserve-3d;/*animation: a1 2s 1;*/transition: all 2s;} .boxList li{float: left;width: 200px;height: 200px;margin:5px;background: darkcyan;-webkit-transition: all 0.3s;transition: all 0.3s;} .on li:hover{-webkit-transform: translate3d(0,0,30px);transform: translate3d(0,0,30px);background:deepskyblue;box-shadow: 30px 30px 10px rgba(0, 0, 0, 0.5);} .on{webkit-transform: rotateX(75deg) rotateY(0deg) rotateZ(45deg);transform: rotateX(75deg) rotateY(0deg) rotateZ(45deg);} </style> </head> <body> <div class="container"> <ul class="boxList"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> <script> var list=document.querySelector('.boxList'); window.onload=function(){ setInterval(transition,1000) } function transition(){ list.className='on boxList'; } </script> </html>
以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關文章
Javascript中函數名.length屬性用法分析(對比arguments.length)
這篇文章主要介紹了Javascript中函數名.length屬性用法,結合實例形式簡單對比分析了與arguments.length屬性的用法區(qū)別,需要的朋友可以參考下2016-09-09Bootstrap輪播插件中圖片變形的終極解決方案 使用jqthumb.js
這篇文章主要介紹了Bootstrap輪播插件中圖片變形的終極解決方案,使用jqthumb.js,感興趣的小伙伴們可以參考一下2016-07-07如何實現(xiàn)JavaScript動態(tài)加載CSS和JS文件
這篇文章主要為大家詳細介紹了JavaScript動態(tài)加載CSS和JS文件,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2015-10-10