前端|一个简单炫酷的前端小项目（html+css+js）----3D图片演示 vue.js|前端|spring|boot|html

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

前言
一、页面特效效果展示
二、功能描述
- - - 1、打开页面，所有图片会自动转动
    - 2、图片的大小和间隔可随鼠标滚轮滚动而改变
    - 3、鼠标按住页面任意位置，拖动光标，页面可随之旋转
三、功能实现
- 1.创建一个父容器，将所有照片叠放在一起
- 2.给所有照片加上旋转动画
- 3.监听鼠标事件
总结

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

文章图片

文章图片

注：上述效果图只是部分效果，原谅我还没有学会自制gif图！
二、功能描述 1、打开页面，所有图片会自动转动 2、图片的大小和间隔可随鼠标滚轮滚动而改变 3、鼠标按住页面任意位置，拖动光标，页面可随之旋转三、功能实现 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.监听鼠标事件 【前端|一个简单炫酷的前端小项目（html+css+js）----3D图片演示】代码如下（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') }

总结以上就是今天要跟大家分享的主要内容，本文仅简单介绍了该特效页面的功能以及实现，并附上部分代码供小伙伴们学习，代码并不是很成熟，也希望得到大牛们的指点。
(注：需要全部源码的小伙伴们可以评论留言哦！！)