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

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

2022-10-19 1032
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前端三剑客实现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
HTML CSS
HTML js
前端html
CSS js
懒羊羊.java
目录
相关文章
代码掌控者
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素，但是它们之间有些细微的差别，稍不注意，就很容易弄错！
代码掌控者
58 1
疯狂的猿
|
9天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
疯狂的猿
80 24
哈你真皮
|
19天前
|
JavaScript 前端开发
页面滚动触发css3动画js插件
delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时，为进入浏览器视口的元素制作各种炫酷的CSS3动画效果。
哈你真皮
45 13
favori
|
2月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目，实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库，旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入，帮助开发者轻松实现3D场景与React项目的无缝融合。
favori
179 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目，实现数字孪生
2G冲浪词条
|
2月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题，javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题，并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先，在Spring Boot应用中添加一个实现了`Filter`接口的类，设置响应头允许所有来源的跨域请求。接着，通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL，验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
2G冲浪词条
47 3
springboot解决js前端跨域问题，javascript跨域问题解决
疯狂的猿
|
28天前
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落，生日蛋糕点亮庆祝动画特效。
疯狂的猿
45 3
龙大吉
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用。
龙大吉
56 5
土木林森
|
2月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性，涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性，涵盖前端路由概念、基本原理、常见实现方式（Hash路由和History路由）、优点及挑战，并通过实际案例分析，帮助开发者更好地理解和应用这一关键技术，提升用户体验。
土木林森
84 1
左诗右码
|
2月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中，后端与前端的数据交换常使用JSON格式，但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数，超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包，介绍如何通过将大整数以字符串形式序列化和反序列化，有效解决这一问题，确保前后端数据交换的准确性。
左诗右码
57 4
温轻舟
|
2月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看！用HTML+CSS+JS打造企业级官网-源码直接可用，文章代码仅用于学习，禁止用于商业
温轻舟
160 1

热门文章

最新文章

  • 1
    从0开始打造一款APP：前端+搭建本机服务，定制暖冬卫衣先到先得
  • 2
    WeaveFox：蚂蚁集团推出 AI 前端智能研发平台，能够根据设计图直接生成源代码，支持多种客户端和技术栈
  • 3
    前端页面加载性能指标之LCP
  • 4
    前端必须掌握的设计模式——单例模式
  • 5
    （前端3D模型开发）网页三维CAD中加载和保存STEP模型
  • 6
    探索无界：前端开发中的响应式设计深度实践与思考###
  • 7
    探索前端性能优化：关键策略与代码实例
  • 8
    前端自动化测试
  • 9
    探索无界：前端开发中的响应式设计哲学####
  • 10
    前端状态管理：Vuex 核心概念与实战
  • 1
    css结构伪类
    68
  • 2
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    97
  • 3
    【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
    61
  • 4
    HTML5/CSS3粒子效果进度条代码
    80
  • 5
    同样都是将物理设备虚拟化，思科的VSS和华为的CSS到底有啥区别？
    146
  • 6
    CSS 超出内容... 或者多行省略及两端对齐及超出多行居中显示
    66
  • 7
    CSS外边距重叠：原理、结果
    58
  • 8
    css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
    69
  • 9
    CSS常见用法 以及JS基础语法
    72
  • 10
    css设置内嵌样式阴影
    79

    • 相关课程

    更多
  • JavaScript 自学手册文档教程
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • 基于webpack和npm的前端组件化实践
  • Vue.js 在前端服务化上的探索与实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月