如何实现3D图片演示

本篇文章给大家详细介绍一下制作3D图片的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

1、创建一个父容器，将所有照片叠放在一起

代码如下（html）：

<div id="darg-container" class="darg"><!-- 父容器，相当于把所有图片都放在一起 --><div id="spin-container"><img src="1.jpg" alt=""><img src="2.jpg" alt=""><img src="3.jpg" alt=""><img src="4.jpg" alt=""><img src="5.jpg" alt=""><img src="6.jpg" alt=""><img src="8.jpg" alt=""><a target="_blank" href="7.jpg"><img src="7.jpg" alt=""></a><!-- <video controls autoplay="autoplay" loop><source src="8.jpg" type="video/mp4"></video> --><p>3D Tiktok Carousel</p></div><div id="ground"></div></div>

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.eventvar d  = e.wheelDelta / 10 || -e.detailradius += dinit(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为evar sX = e.clientX,sY = e.clientY//监听鼠标移动函数this.onpointermove = function(e){console.log(e);e = e || window.event//防止出错,如果e不存在，则让window.event为evar nX = e.clientX,nY = e.clientY;desX = nX - sX;//在x轴上滑动的距离desY = nY - sY;tX += desX * 0.1tY += desY * 0.1// 让页面跟着鼠标动起来applyTransform(oDarg)}this.onpointerup = function(e){//每个多久实现一次setIntervaloDarg.timer = setInterval(function(){desX *= 0.95desY *= 0.95tX += desX * 0.1tY += desY * 0.1applyTransform(oDarg)playSpin(false)if(Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5){clearInterval(oDarg.timer)playSpin(true)}},17) this.onpointermove = this.onpointerup = null }return false
}
function applyTransform(obj){if(tY > 180)tY = 180if(tY < 0)tY = 0obj.style.transform = `rotateX(${-tY}deg) rotateY(${tX}deg)`
}function playSpin(yes){oSpin.style.animationPlayState = (yes ? 'running' : 'paused')
}

【推荐学习：javascript高级教程】

如何实现3D图片演示相关推荐

[HTML5CSS3]20 个酷炫应用及源码
1.HTML5视频破碎重组特效,强大视觉冲击 HTML5视频播放器很多,但是HTML5视频特效还是很少见的,这款HTML5视频破碎重组特效非常刺激,给人强大的视觉冲击.点击视频任意地方,HTML ...
20 个超酷的 HTML5/CSS3 应用及源码
[导读] 1.HTML5视频破碎重组特效,强大视觉冲击HTML5视频播放器很多,但是HTML5视频特效还是很少见的,这款HTML5视频破碎重组特效非常刺激,给人强大的视觉冲击.点击视频任意地方,HTM ...
20个HTML5/CSS3超酷应用
http://www.gbtags.com/gb/share/2818.htm?utm_source=tuicool 20个HTML5/CSS3超酷应用 #文章 CSS3 HTML5 jQuery 申 ...
分享10 个超酷的 HTML5/CSS3 应用及源码
1.HTML5视频破碎重组特效,强大视觉冲击 HTML5视频播放器很多,但是HTML5视频特效还是很少见的,这款HTML5视频破碎重组特效非常刺激,给人强大的视觉冲击.点击视频任意地方,HTML5将会 ...
20个HTML5/CSS3超酷应用(附免积分下载地址)
免积分下载地址:http://download.csdn.net/detail/yangwei19680827/6956667 1.HTML5视频破碎重组特效强大视觉冲击 HTML5视频播放器很多, ...
转。WEB前端特效。统计图，3D切换图片，摇号，转盘抽奖
v阅读目录 v1.0写在前面 v2.0统计图 v3.0图片3D切换 v4.0摇号 v5.0转盘抽奖 v6.0各种登陆加载 v7.0Web版Win8 v博客前言友情提示:所有特效效果均是GIF图片演示 ...
人工智能3d建模算法_打破国外垄断，全国产3D芯片为机器人“点睛”
◎ 科技日报记者崔爽传统机器人只有"手",只能在固定好的点位上完成既定操作,而新一轮人工智能技术大大推动了机器和人的协作,这也对机器人的灵活性有了更高要求. 要想像人一样测量. ...
英特尔 QLC 3D NAND 数据存储
英特尔 QLC 3D NAND 数据存储 NAND是什么由于SSD固态硬盘的普及,NAND这个词逐渐进入用户们的视线.许多厂商都在产品宣传中提到3D NAND颗粒等词汇,对于普通用户来讲,完全不知道 ...
3D Cube计算引擎加速运算
3D Cube计算引擎加速运算华为达芬奇架构的AI芯片Ascend910,同时与之配套的新一代AI开源计算框架MindSpore. 为什么要做达芬奇架构? AI将作为一项通用技术极大地提高生产力,改 ...

如何实现3D图片演示

1、创建一个父容器，将所有照片叠放在一起

2、给所有照片加上旋转动画

3、监听鼠标事件

如何实现3D图片演示相关推荐

最新文章

热门文章