js实现三维(三维的缩写)悬浮效果

效果如下：

代码如下：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title style * { margin 3360 0；padd : 0；} ul、李{列表式：无；} .容器{ perspective: 1300-web套件-perspective :1300；} .boxList { position:absolute宽度： 630像素；高度：630 px左侧：50%;左边距：-315像素；-web套件-转换-style : preserve-3d；变换样式： preserve-3d；/*动画： a1 2s 1；*/transit :所有2s；} .boxList li {左侧浮动：宽度： 200像素；高度： 200像素；margin:5px背景技术：暗青色；-网络套件-transit :全0.3跃迁：全部0.3s}。在李：上悬停{-web kit-transform :平移3d(0，0，30px)；transform: translate3d(0，0，30px)；background : deeppskybluebox-shadow : 30px 30px 10px rgba(0，0，0，0.5)；} .在{ web套件-transform : rotateX(75度)rotateY(0度)rotateZ(45度)上；transform : rotateX(75度)rotateY(0度)rotateZ(45度);}/style/head body div=' container ' ul class=' box list ' Li/Li Li/Li Li/Li Li/Li/ul/div/body script var list=document。queryselector(' .方框列表’)；窗户。onload=function(){ setInterval(transition，1000)} function transition(){ list。类名='在盒子列表上'；}/脚本/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！