AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【HTML+CSS+JS】前端三剑客实现3D旋转照片墙

2022-10-19 930
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前端三剑客实现3D旋转照片墙

 最近大家应该都对3D照片墙很心动吧，赶快拿走给女朋友制作一个，让她知道代码的浪漫

 

image.pngimage.gif编辑

源码如下：

1.把html 文件和img文件放在同级目录下

2.照片格式要注意是否一致哦

<!DOCTYPE html>
<html lang="en" ondragstart="return false">
<head>
      <meta charset="UTF-8">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>3D旋转照片墙</title>
      <style type="text/css">
            /* 去掉默认效果 */
            * {
                  margin: 0;
                  padding: 0;
            }
            body {
                  background: #222;
                  overflow: hidden;
                  /* 取消选中 */
                  user-select: none;
            }
            @keyframes rotate {
                  100% {
                        transform: rotateY(360deg);
                  }
            }
            .perspective {
                  /*子元素透视 场景深度*/
                  perspective: 600px;
            }
            .wrap {
                  /* 3d */
                  width: 135px;
                  height: 240px;
                  margin: 100px auto;
                  position: relative;
                  /* border: 1px solid red; */
                  transform: rotateX(-20deg) rotateY(0deg);
                  transform-style: preserve-3d;
            }
            .wrap img {
                  display: block;
                  /* 绝对定位 */
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  transform: rotateY(0deg) translateZ(0px);
                  background: transparent;
                  box-shadow: 0 0 4px #fff;
                  border-radius: 5px;
                  /* webkit */
            }
            /* 照片底座 */
            .wrap p {
                  width: 1200px;
                  height: 1200px;
                  background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 122, .5), rgba(0, 0, 0, 0));
                  position: absolute;
                  border-radius: 50%;
                  left: 50%;
                  top: 100%;
                  margin-left: -600px;
                  margin-top: -600px;
                  /* 沿着x轴按倒 */
                  transform: rotateX(90deg);
            }
      </style>
</head>
<body>
      <!-- 盒子容器 -->
      <div class="perspective">
            <div class="wrap" id="imgwrap">
                  <!-- 引入图片值页面 -->
                  <img class="f1" src="img/12.png" />
                  <img class="f1" src="img/13.png" />
                  <img class="f1" src="img/14.png" />
                  <img class="f1" src="img/15.png" />
                  <img class="f1" src="img/16.png" />
                  <img class="f1" src="img/1.png" />
                  <img class="f1" src="img/2.png" />
                  <img class="f1" src="img/3.png" />
                  <img class="f1" src="img/4.png" />
                  <img class="f1" src="img/5.png" />
                  <img class="f1" src="img/6.png" />
                  <img class="f1" src="img/7.png" />
                  <img class="f1" src="img/5.png" />
                  <img class="f1" src="img/6.png" />
                  <img class="f1" src="img/7.png" />
                  <img class="f1" src="img/8.png" />
                  <img class="f1" src="img/9.png" />
                  <img class="f1" src="img/10.png" />
                  <img class="f1" src="img/11.png" />
                  <img class="f1" src="img/17.png" />
                  <img class="f1" src="img/18.png" />
                  <img class="f1" src="img/19.png" />
                  <img class="f1" src="img/20.png" />
                  <img class="f1" src="img/21.png" />
                  <img class="f1" src="img/22.png" />
                  <img class="f1" src="img/23.png" />
                  <img class="f1" src="img/24.png" />
                  <img class="f1" src="img/25.png" />
                  <img class="f1" src="img/26.png" />
                  <img class="f1" src="img/27.png" />
                  <img class="f1" src="img/28.png" />
                  <img class="f1" src="img/29.png" />
                  <img class="f1" src="img/30.png" />
                  <!-- 引入图片值页面 -->
                  <img class="f2" src="img/1.png" />
                  <img class="f2" src="img/2.png" />
                  <img class="f2" src="img/3.png" />
                  <img class="f2" src="img/4.png" />
                  <img class="f2" src="img/5.png" />
                  <img class="f2" src="img/9.png" />
                  <img class="f2" src="img/10.png" />
                  <img class="f2" src="img/11.png" />
                  <img class="f2" src="img/12.png" />
                  <img class="f2" src="img/25.png" />
                  <img class="f2" src="img/26.png" />
                  <img class="f2" src="img/27.png" />
                  <img class="f2" src="img/28.png" />
                  <img class="f2" src="img/29.png" />
                  <img class="f2" src="img/30.png" />
                  <img class="f2" src="img/13.png" />
                  <img class="f2" src="img/14.png" />
                  <img class="f2" src="img/15.png" />
                  <img class="f2" src="img/16.png" />
                  <img class="f2" src="img/17.png" />
                  <img class="f2" src="img/18.png" />
                  <img class="f2" src="img/19.png" />
                  <img class="f2" src="img/20.png" />
                  <img class="f2" src="img/21.png" />
                  <img class="f2" src="img/22.png" />
                  <img class="f2" src="img/23.png" />
                  <img class="f2" src="img/24.png" />
                  <img class="f2" src="img/6.png" />
                  <img class="f2" src="img/7.png" />
                  <img class="f2" src="img/5.png" />
                  <img class="f2" src="img/6.png" />
                  <img class="f2" src="img/7.png" />
                  <img class="f2" src="img/8.png" />
                  <!-- 引入图片值页面 -->
                  <img class="f3" src="img/1.png" />
                  <img class="f3" src="img/2.png" />
                  <img class="f3" src="img/11.png" />
                  <img class="f3" src="img/12.png" />
                  <img class="f3" src="img/25.png" />
                  <img class="f3" src="img/26.png" />
                  <img class="f3" src="img/27.png" />
                  <img class="f3" src="img/3.png" />
                  <img class="f3" src="img/4.png" />
                  <img class="f3" src="img/5.png" />
                  <img class="f3" src="img/16.png" />
                  <img class="f3" src="img/17.png" />
                  <img class="f3" src="img/18.png" />
                  <img class="f3" src="img/10.png" />
                  <img class="f3" src="img/28.png" />
                  <img class="f3" src="img/29.png" />
                  <img class="f3" src="img/30.png" />
                  <img class="f3" src="img/13.png" />
                  <img class="f3" src="img/19.png" />
                  <img class="f3" src="img/20.png" />
                  <img class="f3" src="img/21.png" />
                  <img class="f3" src="img/22.png" />
                  <img class="f3" src="img/23.png" />
                  <img class="f3" src="img/24.png" />
                  <img class="f3" src="img/9.png" />
                  <img class="f3" src="img/14.png" />
                  <img class="f3" src="img/15.png" />
                  <img class="f3" src="img/6.png" />
                  <img class="f3" src="img/7.png" />
                  <img class="f3" src="img/5.png" />
                  <img class="f3" src="img/6.png" />
                  <img class="f3" src="img/7.png" />
                  <img class="f3" src="img/8.png" />
                  <p></p>
            </div>
      </div>
      <!--  src="JS/photo.js" -->
      <script type="text/javascript">
            var oImg = document.getElementsByClassName('f1')
            var oImg2 = document.getElementsByClassName('f2')
            var oImg3 = document.getElementsByClassName('f3')
            var len = oImg.length;
            console.log(len)
            var deg = 360 / len;
            var oWrap = document.getElementById("imgwrap");
            // var oWrap=document.querySelector('.wrap');
            //页面加载完毕在执行的代码
            window.onload = function () {
                  Array.prototype.forEach.call(oImg, function (ele, index, self) {
                        // 旋转并沿Z轴平移
                        ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px)";
                        //过渡时间1s
                        ele.style.transition = "1s " + (len - index) * 0.1 + "s";
                  });
                  Array.prototype.forEach.call(oImg2, function (ele, index, self) {
                        // 旋转并沿Z轴平移
                        ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(240px)";
                        //过渡时间1s
                        ele.style.transition = "1s " + (len - index) * 0.1 + "s";
                  });
                  Array.prototype.forEach.call(oImg3, function (ele, index, self) {
                        // 旋转并沿Z轴平移
                        ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(480px)";
                        //过渡时间1s
                        ele.style.transition = "1s " + (len - index) * 0.1 + "s";
                  });
                  // Array.prototype.forEach.call(oImg, function (ele, index, self) {
                  //       // 旋转并沿Z轴平移
                  //       ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(350px)";
                  //       //过渡时间1s
                  //       ele.style.transition = "1s " + (len - index) * 0.1 + "s";
                  // });
            }
            //翻动3D相册
            var newX, newY, lastX, lastY, minusX, minusY, rotX = -20, rotY = 0;
            document.onmousedown = function (e) {
                  // 点击设置初值
                  lastX = e.clientX;
                  lastY = e.clientY;
                  this.onmousemove = function (e) {
                        newX = e.clientX;
                        newY = e.clientY;
                        minusX = newX - lastX;
                        minusY = newY - lastY;
                        rotX -= minusY * 0.2;
                        rotY += minusX * 0.1;
                        oWrap.style.transform = "rotateX(" + rotX + "deg) rotateY(" + rotY + "deg)";
                        lastX = newX;
                        lastY = newY;
                  }
                  this.onmouseup = function (e) {
                        //鼠标松开
                        this.onmousemove = null;//清除鼠标移动
                  }
            }
      </script>
</body>
</html>

image.gif

成功了别忘了三连嗷~

文章标签：
前端开发
关键词：
JavaScript CSS
CSS js
HTML CSS
JavaScript前端
js前端
懒羊羊.java
目录
相关文章
小徐在进步
|
10天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性，包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签，用于创建超链接，并展示了如何设置目标页面打开方式。最后，文档还涵盖了如何在网页中嵌入音频和视频文件，包括简化写法及常用属性。
小徐在进步
28 13
游客zi3qmblbcdexu
|
10天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3（HTML--网页标签 下）
HTML/CSS/JS学习笔记 Day3（HTML--网页标签 下）
游客zi3qmblbcdexu
40 9
html的七十二变
|
8天前
|
缓存 JavaScript 前端开发
js和html代码一定要分离吗
JavaScript（JS）和HTML代码的分离虽非绝对必要，但通常被推荐
html的七十二变
15 5
极简博客
|
7天前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成：React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成，以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧，展示了如何利用Express.js处理路由和静态文件服务，同时在React、Vue和Angular中构建用户界面，帮助开发者快速掌握前后端分离的开发方法，实现高效、灵活的Web应用构建。
极简博客
29 3
游客zi3qmblbcdexu
|
8天前
|
JavaScript 前端开发 UED
让 HTML 向 Vue.js 华丽转身：如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身：如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
游客zi3qmblbcdexu
29 4
游客zi3qmblbcdexu
|
15天前
|
前端开发 JavaScript
前端ES5 | js —添加元素方法
前端ES5 | js —添加元素方法
游客zi3qmblbcdexu
33 7
你都不懂
|
16天前
|
前端开发 程序员
CSS前端学习（online tuorials）
CSS前端学习（online tuorials）
你都不懂
14 5
土木林森
|
19天前
|
Android开发 iOS开发 C#
Xamarin：用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App，体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架，允许开发者使用单一的 C# 代码库构建高性能的原生移动应用，支持 iOS、Android 和 Windows 平台。作为微软的一部分，Xamarin 充分利用了 .NET 框架的强大功能，提供了丰富的 API 和工具集，简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用，包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能，帮助开发者提高开发效率并实现一致的用户体验。
土木林森
42 0
土木林森
|
19天前
|
开发者 C# Android开发
明白吗？Xamarin与Native的终极对决：究竟哪种开发方式更适合您的项目需求，让我们一探究竟！
【8月更文挑战第31天】随着移动应用开发的普及，开发者面临多种技术选择。本文对比了跨平台解决方案Xamarin与原生开发方式的优势与劣势。Xamarin使用C#进行跨平台开发，代码复用率高，可大幅降低开发成本；但因基于抽象层，可能影响性能。原生开发则充分利用平台特性，提供最佳用户体验，但需维护多套代码库，增加工作量。开发者应根据项目需求、团队技能和预算综合考量，选择最适合的开发方式。
土木林森
59 0
土木林森
|
19天前
|
开发者 Android开发 iOS开发
Xamarin开发者的神器！揭秘你绝不能错过的插件和工具，让你的开发效率飞跃式提升
【8月更文挑战第31天】Xamarin.Forms 是一个强大的框架，让开发者通过单一共享代码库构建跨平台移动应用，支持 iOS、Android 和 Windows。使用 C# 和 XAML，它简化了多平台开发流程，保持一致的用户体验。本指南通过创建一个简单的 “HelloXamarin” 应用介绍 Xamarin.Forms 的基本功能和工作原理。首先配置 Visual Studio 开发环境，然后创建并运行一个包含标题、按钮和消息标签的示例应用，展示如何定义界面布局及处理按钮点击事件。这帮助开发者快速入门 Xamarin.Forms，提高跨平台应用开发效率。
土木林森
30 0