一个简单炫酷的特效页面（html+css+js 含源码）—-3D图片演示

• 前言
• 一、页面特效效果展示
• 二、功能描述
• 1、打开页面，所有图片会自动转动
• 2、图片的大小和间隔可随鼠标滚轮滚动而改变
• 3、鼠标按住页面任意位置，拖动光标，页面可随之旋转

前言

对于学前端的小伙伴来说，吸引你们入坑的大都是一些炫酷的页面。但往往那些页面的源代码对初学的伙伴们都不太友好。今天给大家分享一个代码简单、适合初学者、高级感炫酷感爆棚的特效页面（有npy的快乐加倍！)。

一、页面特效效果展示

注：上述效果图只是部分效果，原谅我还没有学会自制gif图！

二、功能描述

1、打开页面，所有图片会自动转动

2、图片的大小和间隔可随鼠标滚轮滚动而改变

3、鼠标按住页面任意位置，拖动光标，页面可随之旋转

三、功能实现

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')}

总结

以上就是今天要跟大家分享的主要内容，本文仅简单介绍了该特效页面的功能以及实现，并附上部分代码供小伙伴们学习，代码并不是很成熟，也希望得到大牛们的指点。

(注：需要全部源码的小伙伴们可以评论留言哦！！)