HTML+CSS+JS实现 ❤️3D万花筒图片相册展示特效❤️

效果演示： 文末获取源码

代码目录：

主要代码实现：

HTML代码 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Document</title>
</head><style type="text/css">* {margin: 0;padding: 0;}.pic {width: 120px;height: 180px;border: 1px red solid;margin: 150px auto 0;position: relative;/*transform 旋转元素*/transform-style: preserve-3d;transform: perspective(800px) rotateX(-10deg) rotateY(0deg);}body {background-color: black;overflow: hidden;}.pic img {position: absolute;width: 100%;height: 100%;border-radius: 5px;box-shadow: 0px 0px 10px #fff;/*倒影的设置*/-webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5) 100%);}.pic p {width: 1200px;height: 1200px;background: -webkit-radial-gradient(center center, 600px 600px, rgba(255, 255, 255, .5), rgba(0, 0, 0, 0));position: absolute;top: 100%;left: 50%;margin-top: -600px;margin-left: -600px;border-radius: 600px;transform: rotateX(90deg);}
</style><body><div class="pic"><img src="img/1.jpg" /><img src="img/2.jpg" /><img src="img/3.jpg" /><img src="img/4.jpg" /><img src="img/5.jpg" /><img src="img/6.jpg" /><img src="img/7.jpg" /><img src="img/8.jpg" /><img src="img/9.jpg" /><img src="img/10.jpg" /><img src="img/11.jpg" /><p></p></div><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(function() {var imgL = $(".pic img").size();var deg = 360 / imgL;var roY = 0,roX = -10;var xN = 0,yN = 0;var play = null;$(".pic img").each(function(i) {$(this).css({<!---translateZ 定义2d旋转沿着z轴->"transform": "rotateY(" + i * deg + "deg) translateZ(300px)"});<!--防止图片被拖拽-->$(this).attr('ondragstart', 'return false');});$(document).mousedown(function(ev) {var x_ = ev.clientX;var y_ = ev.clientY;clearInterval(play);console.log('我按下了');$(this).bind('mousemove', function(ev) {/*获取当前鼠标的坐标*/var x = ev.clientX;var y = ev.clientY;/*两次坐标之间的距离*/xN = x - x_;yN = y - y_;roY += xN * 0.2;roX -= yN * 0.1;console.log('移动');//$('body').append('<div style="width:5px;height:5px;position:absolute;top:'+y+'px;left:'+x+'px;background-color:red"></div>');$('.pic').css({transform: 'perspective(800px) rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)'});/*之前的鼠标坐标*/x_ = ev.clientX;y_ = ev.clientY;});}).mouseup(function() {$(this).unbind('mousemove');var play = setInterval(function() {xN *= 0.95;yN *= 0.95if (Math.abs(xN) < 1 && Math.abs(yN) < 1) {clearInterval(play);}roY += xN * 0.2;roX -= yN * 0.1;$('.pic').css({transform: 'perspective(800px) rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)'});}, 30);});});</script></body></html>

上面的图片文件和js文件需要引入