本篇文章给大家详细介绍一下制作3d图片的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
1、创建一个父容器，将所有照片叠放在一起
代码如下（html）：
3D Tiktok Carousel
登录后复制
2、给所有照片加上旋转动画
代码如下（js）：
function init(delayTime) { // 给所有的图片加动画 for (var i = 0; i < aEle.length; i++) { aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)" aEle[i].style.transition = "transform 1s" aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + 's' }}setTimeout(init, 1000)
登录后复制
3、监听鼠标事件
代码如下（js）：
// 滚轮滚动// 监听鼠标滚轮事件，该函数不用调用直接生效document.onmousewheel = function(e){ // console.log(e) e = e || window.event var d = e.wheelDelta / 10 || -e.detail radius += d init(1)} var sX,sY,nX,nY,desX = 0 , desY = 0, tX = 0,tY = 0;// 鼠标拖动页面document.onpointerdown = function(e){ // console.log(e); e = e || window.event//防止出错,如果e不存在，则让window.event为e var sX = e.clientX, sY = e.clientY //监听鼠标移动函数 this.onpointermove = function(e){ console.log(e); e = e || window.event//防止出错,如果e不存在，则让window.event为e var nX = e.clientX, nY = e.clientY; desX = nX - sX;//在x轴上滑动的距离 desY = nY - sY; tX += desX * 0.1 tY += desY * 0.1 // 让页面跟着鼠标动起来 applyTransform(oDarg) } this.onpointerup = function(e){ //每个多久实现一次setInterval oDarg.timer = setInterval(function(){ desX *= 0.95 desY *= 0.95 tX += desX * 0.1 tY += desY * 0.1 applyTransform(oDarg) playSpin(false) if(Math.abs(desX) < 0.5 && Math.abs(desY) 180)tY = 180 if(tY < 0)tY = 0 obj.style.transform = `rotateX(${-tY}deg) rotateY(${tX}deg)`}function playSpin(yes){ oSpin.style.animationPlayState = (yes ? 'running' : 'paused')}
登录后复制
【推荐学习：javascript高级教程】
以上就是教你一招实现3D图片演示的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2952224.html
