html结合css实现浏览器展示3D相册

最近写了一个在浏览器展示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, // 前一次的坐标XlastY = 0,nowX = 0, // 当前的坐标XnowY = 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 {@Overridepublic void addViewControllers(ViewControllerRegistry registry) {registry.addViewController("/user/abum").setViewName("/abum");}@Overridepublic void addInterceptors(InterceptorRegistry registry) {//registry.addInterceptor(accessInterceptor);}
}

3.最终显示的效果如下：

大家可以自己去尝试下。

html结合css实现浏览器展示3D相册相关推荐

一行代码教你撩妹手到擒来❤html+css+js烟花告白3D相册(含音乐+可自定义文字)520表白/七夕情人节/求婚
❤ 我是如何获取学姐芳心~html+css+js实现满屏烟花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白/送礼物/3D相册,是不是要给女朋友或者正在追求的 ...
❤520情人节陪她一起看流星雨~html+css+javascript制作流星雨3D相册(含音乐)
❉ 520情人节陪她一起看流星雨~html+css+javascript流星雨3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹 ...
一行代码教你撩妹手到擒来~html+css+js烟花告白3D相册(含音乐+可自定义文字)
❤ 我是如何获取学姐芳心~html+css+js实现满屏烟花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白/送礼物/3D相册,是不是要给女朋友或者正在追求的 ...
一行代码教你撩妹手到擒来html+css+js烟花告白3D相册(含音乐+可自定义文字)520表白/七夕情人节/求婚...
❤ 我是如何获取学姐芳心~html+css+js实现满屏烟花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白/送礼物/3D相册,是不是要给女朋友或者正在追求的 ...
❤唯美满天星❤ html+css+js炫酷3D相册(含音乐/可自定义文字)程序员表白必备
元旦节快到了,在跨年夜前夕.是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧! ❤元旦节表白3D相册,在元 ...
vtk.js、three.js在浏览器展示3d图形
对于unstructured grid非格式化网格图形vtk数据,是没有办法在浏览器上展示的.用paraview对vtk进行extract surface后再另存为vtk可以转成polydata类型的 ...
一行代码教你七夕情人节如何告白❤—动漫3D相册(音乐+文字)HTML+CSS+JavaScript
❤ 一行代码教你七夕情人节如何告白-动漫3D相册(音乐+文字)HTML+CSS+JavaScript 七夕是中国的情人节,七夕520情人节也是一个非常适合表白的日子,可以把自己平常害怕说出来的话,在这 ...
❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript
❀ 520七夕情人节告白网页代码❀-浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript 520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端大气上档次的D立体动 ...
HTML5七夕情人节表白网页抖音超火的樱花雨3D相册 HTML+CSS+JavaScript
HTML5七夕情人节表白网页????抖音超火的樱花雨3D相册???? HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱 ...

html结合css实现浏览器展示3D相册

html结合css实现浏览器展示3D相册相关推荐

最新文章

热门文章