本篇文章给大家详细介绍一下制作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 class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/9659" title="ASP婚纱摄影工作室1.0"><img
src="https://img.php.cn/upload/webcode/000/000/017/175958280744666.gif" alt="ASP婚纱摄影工作室1.0" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/9659" title="ASP婚纱摄影工作室1.0">ASP婚纱摄影工作室1.0</a>
<p>本系统是一套为影楼婚纱摄影网站量身设计打造的商业网站建设系统，本系统以品牌介绍、作品展示、取景景点介绍、服务价格体系、加盟合作、人才招聘、联系我们、交流论坛八大主要功能模块 ,以及诸多实用的辅助模块组成。用户名：8minutemanager 密码：ersui1215 后台地址http://www.你的域名.com/8minutemanager 修改了： 1、编辑器无法上传图片的问题 2、新</p>
</div>
<a href="/xiazai/code/9659" title="ASP婚纱摄影工作室1.0" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</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.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) < 0.5){
clearInterval(oDarg.timer)
playSpin(true)
}
},17)
this.onpointermove = this.onpointerup = null
}
return false
}
function applyTransform(obj){
if(tY > 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高级教程】
