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

简介: 前端三剑客实现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

成功了别忘了三连嗷~

相关文章
|
5天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
104 1
|
5天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
21 0
|
5天前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
27 1
|
5天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
盒模型 盒模型: 所谓盒模型,就是浏览器为页面中的每个HTML元素生成的矩形盒子。 这些盒子们都要按照可见板式模型在页面上排布。 可见的板式模型主要由三个属性控制:position 属性、display 属性和 float属性。 position属性控制页面上元素间的位置关系。 display属性控制元素是堆叠、并排或者不在页面上显示。 float属性提供控制的方法,以便于把元素组成成多栏布局。 盒模型讲解: 在默认的情况下,每个盒子的边框是不可见的,背景也是透明的。 所以我们 不能直接的看到页面中的盒
35 0
|
5天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
Animation属性 css3为Animation动画提供的几个属性如下: 属性名 属性值 animation-name 指定动画名称,该属性指定一个已有的关键帧定义。 animation-duration 指定动画持续时间。 animation-timing-funtion 指定动画变化速度。 animation-delay 指定动画延迟多长时间才开始执行。 animation-iteration-count 指定动画的循环执行次数。 animation:这是一个复合属性。
25 0
|
5天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
position定位(核心) 我们讲盒模型的时候,提到了3个属性可以用来控制页面排版。 三大属性:position属性,display属性,float属性。 position 属性控制页面上元素间的位置关系。 display 属性控制页面元素是否显示或者是堆叠还是并排显示。 float 属性提供控制方法。 通过float这种控制方法,可以实现多栏布局,导航菜单等等。 position属性是干嘛用的?怎么用?有哪些属性值? position属性控制页面上元素间的位置关系,也就是排版。 怎么用?要知道怎么用
70 1
|
5天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的,其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制: 当元素的同一个样式属性有多种样式值的时候,CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则: 层叠规则一:找到应用给每个元素和属性的声明。 说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则, 并标识出所有受到影响的HTML元素。
21 1
|
4月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
4月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
4月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。

热门文章

最新文章