php 3d的实现,html实现3d悬浮效果的实现步骤

实现3d悬浮效果是要使用H5的新属性，怎么实现3d悬浮效果？实现3d悬浮效果的注意事项有哪些，下面就是实战案例，一起来看一下。

*{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);}

var list=document.querySelector('.boxList');

window.οnlοad=function(){

setInterval(transition,1000)

}

function transition(){

list.className='on boxList';

}

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：