js实现3d悬浮效果

2019-11-19 17:33:19

字体：大中小

来源：转载

供稿：网友

效果如下：

代码如下：

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：基于JS实现翻书效果的页面切换样式

下一篇：JavaScript中利用构造器函数模拟类的方法