javascript如何完成3D立体的照片墙（附代码）
时间：2024/6/3作者：未知来源：争怎路由网人气：
- window.event; //当前鼠标距离页面左边的距离 nowX=ev.clientX; //当前鼠标距离页面上边的距离 nowY=ev.clientY; //X方向上的差值 minusX=nowX - lastX; //Y方向上的差值 minusY=nowY - lastY; //X轴的旋转角度(乘0.1是防止旋转过快) roX-=minusY*0.1; //y轴的旋转角度(乘0.2是防止旋转过快) roY+=minusX*0.2; oWrap.style.transform='rotateX('+roX+'deg) rotateY('+roY+'deg)'; lastX=nowX; lastY=nowY; } this.onmouseup=function(){ //鼠标抬起，结束鼠标移动事件 this.onmousemove=null; } return false; } </script>
3.CSS3实现倒影
<style> #wrap img{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 1px; box-shadow: 0 0 2px #fff; -webkit-box-reflect: below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%); } </style>4.旋转的惯性实现
思路：当鼠标抬起后，以一个越来越小的值进行旋转，通过一个定时器来实现
JS实现惯性
timer=setInterval(function(){ minusX*=0.95; minusY*=0.95; roY+=minusX*0.2; roX-=minusY*0.1; oWrap.style.transform='rotateX('+roX+'deg) rotateY('+roY+'deg)'; if(Math.abs(minusX)<0.5 && Math.abs(minusY)<0.5){ clearInterval(timer); } },13)在 onmouseup 事件函数中添加如上代码。
5.添加入场动画
最后一张图片最先出来，第一张图片最后出来，transform动画进行相应的延迟，JS 代码做如下修改
以上就是这个案例的大致描述。
以上就是javascript如何实现3D立体的照片墙（附代码）的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
关键词：javascript如何完成3D立体的照片墙（附代码）