最近写了一个在浏览器展示3D相册效果，通过html文件结合css实现。
1.html详细代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D相册</title>
<script src="../js/jquery-3.1.1.js"></script>
<style type="text/css">
* {
margin:0;
padding:0;
font-size:0;
}
html,body {
width:100%;
height:100%;
display:flex;
display:-webkit-flex;
/*background:-webkit-radial-gradient(#490338 10%,#000);*/
background:-webkit-radial-gradient(#982378 20%,#000);
perspective:900px;
overflow:hidden;
}
#album {
width:133px;
height:200px;
margin:auto;
position:relative;
transform-style:preserve-3d;
transform:rotateX(-20deg);
}
#album img {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
/* 反射倒影 距离下面5px */
-webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));
}
#album p {
position:absolute;
left:calc(133px/2 - 800px/2);
top:calc(200px/2 - 800px/2);
width:800px;
height:800px;
background:rgba(255,255,255,0.1);
transform:translateY(100px) rotateX(90deg);
border-radius:50%;
}
</style>
<script type="text/javascript">
/*旋转分散*/
window.onload = function() {
var album = document.getElementById('album'),
aImg = document.querySelectorAll('img');
for (var i = 0; i < aImg.length; i++) {
// 图片旋转分散 36°
aImg[i].style.transform = 'rotateY(' + i * 360 / aImg.length + 'deg) translateZ(300px)';
aImg[i].style.transition = 'transform 1s ' + (aImg.length - i) * 0.1 + 's';
}
var lastX = 0, // 前一次的坐标X
lastY = 0,
nowX = 0, // 当前的坐标X
nowY = 0,
desX = 0,
desY = 0,
rotX = -30,
rotY = 0,
timer; // 时间间隔
document.onmousedown = function(e) {
var e = e || event;
lastX = e.clientX;
lastY = e.clientY;
this.onmousemove = function(e) {
var e = e || event;
nowX = e.clientX;
nowY = e.clientY;
desX = nowX - lastX;
desY = nowY - lastY;
// 更新album的旋转角度，拖拽越快-> des变化大 -> roY变化大 -> 旋转快
rotX -= desY * 0.1;
rotY += desX * 0.2;
album.style.transform = 'rotateX(' + rotX + 'deg) rotateY(' + rotY + 'deg)';
lastX = nowX;
lastY = nowY;
}
document.onmouseup = function() {
this.onmousemove = this.onmouseup = null;
timer = setInterval(function() {
desX *= 0.95;
desY *= 0.95;
rotX -= desY * 0.1;
rotY += desX * 0.2;
album.style.transform = 'rotateX(' + rotX + 'deg) rotateY(' + rotY + 'deg)';
if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
clearInterval(timer);
}
}, 13)
}
// 阻止默认行为
return false;
}
}
</script>
</head>
<body>
<div id="album">
<img src="https://guangz-myblog.oss-cn-shenzhen.aliyuncs.com/private/user/%E5%88%98%E5%85%89%E5%AE%97/150d36ed-cce7-4201-b6d9-ea376c348af9.png" alt="">
<img src="https://guangz-myblog.oss-cn-shenzhen.aliyuncs.com/private/user/%E5%88%98%E5%85%89%E5%AE%97/timg%20%286%29.jpg" alt="">
<img src="https://guangz-myblog.oss-cn-shenzhen.aliyuncs.com/private/user/%E5%88%98%E5%85%89%E5%AE%97/timg%20%289%29.jpg" alt="">
<img src="https://guangz-myblog.oss-cn-shenzhen.aliyuncs.com/private/user/%E5%88%98%E5%85%89%E5%AE%97/timg%20%281%29.jpg" alt="">
<img src="https://guangz-myblog.oss-cn-shenzhen.aliyuncs.com/private/user/%E5%88%98%E5%85%89%E5%AE%97/timg%20%282%29.jpg" alt="">
<img src="https://guangz-myblog.oss-cn-shenzhen.aliyuncs.com/private/user/%E5%88%98%E5%85%89%E5%AE%97/timg%20%281%29.jpg" alt="">
<img src="https://guangz-myblog.oss-cn-shenzhen.aliyuncs.com/private/user/%E5%88%98%E5%85%89%E5%AE%97/6285eddc-8032-4f8b-b7bd-631d7160b68f.png" alt="">
<img src="https://guangz-myblog.oss-cn-shenzhen.aliyuncs.com/private/user/%E5%88%98%E5%85%89%E5%AE%97/d64c4a18-dff6-4a1f-bcea-c019645562c3.png" alt="">
<img src="https://guangz-myblog.oss-cn-shenzhen.aliyuncs.com/private/user/%E5%88%98%E5%85%89%E5%AE%97/ff52da04-009d-49b4-9601-936c33bb0673.png" alt="">
<img src="https://guangz-myblog.oss-cn-shenzhen.aliyuncs.com/private/user/%E5%88%98%E5%85%89%E5%AE%97/timg.jpg" alt="">
<p></p>
</div>
</body>
</html>
这里面主要运用了css美化页面，利用旋转，图片阴影效果，加上倒影展示，配合js实现动态页面效果。
2.接着我们实现WebMvcConfigurer接口，定义调用接口，返回html。
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/user/abum").setViewName("/abum");
}
@Override
public void addInterceptors(InterceptorRegistry registry) {
//registry.addInterceptor(accessInterceptor);
}
}
3.最终显示的效果如下：
大家可以自己去尝试下。