H5实现3D旋转照片墙教程

news2025/1/11 20:54:14

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

  • 🤖 洛可可白：个人主页

  • 🔥 个人专栏：✅前端技术 ✅后端技术

  • 🏠 个人博客：洛可可白博客

  • 🐱 代码获取：bestwishes0203

  • 📷 封面壁纸：洛可可白wallpaper

在这里插入图片描述

文章目录

  • H5实现3D旋转照片墙教程
    • 实现效果
    • CSS transform属性
    • 实现步骤
      • 1. 创建HTML结构
      • 2. 编写CSS样式
      • 3. 使用JavaScript进行动画
    • 全部代码
    • 结语
    • 🎉 往期精彩回顾

H5实现3D旋转照片墙教程

在本文中，我们将学习如何使用HTML5、CSS3和JavaScript来创建一个3D旋转照片墙的效果。我们将介绍CSS的transform属性，以及如何使用JavaScript DOM API来实现这个效果。

实现效果

在这里插入图片描述

CSS transform属性

CSS的transform属性允许我们对元素进行2D或3D的转换。这包括旋转、缩放、移动和倾斜等操作。在3D转换中，rotateX、rotateY和translateZ是常用的函数，它们分别用于围绕X轴和Y轴旋转以及沿Z轴移动。

实现步骤

1. 创建HTML结构

首先，我们需要创建一个包含图片的HTML结构。

<div class="perspective">
  <div class="wrap" id="imgwrap">
    <img src="image1.jpg" />
    <img src="image2.jpg" />
    <!-- 更多图片 -->
  </div>
</div>

2. 编写CSS样式

接下来，我们使用CSS来设置照片墙的样式。我们给.perspective类添加perspective属性来定义3D空间的深度，给.wrap类添加transform属性来设置初始的3D旋转。

.perspective {
  perspective: 800px;
}

.wrap {
  width: 240px;
  height: 140px;
  transform: rotateX(-20deg) rotateY(0deg);
  transform-style: preserve-3d;
}

3. 使用JavaScript进行动画

现在我们需要使用JavaScript来动态地为每张图片添加3D旋转效果，并使其能够响应用户的鼠标操作。

window.onload = function() {
  var oImg = document.getElementsByTagName("img");
  var len = oImg.length;
  var deg = 360 / len;
  Array.prototype.forEach.call(oImg, function(ele, index) {
    ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(565px)";
    ele.style.transition = "1s " + (len - index) * 0.1 + "s";
  });
};

document.onmousedown = function(e) {
  var oWrap = document.getElementById("imgwrap");
  var newX, newY, lastX, lastY, minusX, minusY, rotX = -20, rotY = 0;
  lastX = e.clientX;
  lastY = e.clientY;
  oWrap.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;
  }
  oWrap.onmouseup = function(e) {
    oWrap.onmousemove = null;
  }
};

在上述JavaScript代码中，我们首先在页面加载完成后为每张图片设置了一个初始的旋转角度和过渡时间。然后，我们监听mousedown事件来开始旋转，并在mousemove中实时更新旋转角度，从而实现3D旋转的效果。

全部代码

<!DOCTYPE html>
<html lang="en" ondragstart="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 {
            transform: scale(0.6);
            background: #222;
            overflow: hidden;
            /* 取消选中 */
            user-select: none;
        }
        
        .perspective {
            /*子元素透视 场景深度*/
            perspective: 800px;
        }
        
        .wrap {
            /* 3d */
            width: 240px;
            height: 140px;
            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 src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202209/bec005059c961095de116266433609ad.jpg" />
            <img src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202209/1d9e79967a0e9ef1bb6869f8d2d27d56.jpg" />
            <img src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202208/40f1faa375cb09993ac56d0100247169--1155426306.jpg" />
            <img src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202208/15383340a19d5e66858afec909e8376a--143226042.jpg" />
            <img src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202208/f80a3cf13ed922ae56c295b6e1750b9f--862862084.jpg" />
            <img src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202208/03e3215ba41e9dda4b612d435dc33749--4017768935.jpg" />
            <img src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202208/e46db6533224e5f49e5a0187c46f5f74--583756240.jpg" />
            <img src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202208/c052bcaad5831e744d80408c7f18309e--1643858281.jpg" />
            <img src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202208/097af3d9e33c26ed741a8df79445f2e9--3623425165.jpg" />
            <img src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202208/fb48e4405d33675142f1f96bf5d13433--1464361656.jpg" />
            <img src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202208/47648ad8b435d8c865a0e1720d67f19e--2484210946.jpg" />
            <img src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202211/1908da2b1afec00022ad3b22c02da692--4079323895.jpg" />
            <img src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202211/dc954cdfc5aac06f8e26c1cdc6d02349--1494553420.jpg" />
            <img src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202211/30d74773eeb77bfc4cf9db10e62a80f2--3057522847.jpg" />
            <img src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202210/b07fa9c46502bbb1d715a7034a3a7c42--77324329.jpg" />
            <!-- <p></p> -->
        </div>
    </div>
    <!--  src="JS/photo.js" -->
    <script type="text/javascript">
        var oImg = document.getElementsByTagName("img")
        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(565px)";
                    //过渡时间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>

结语

通过上述步骤，我们成功地创建了一个3D旋转照片墙的效果。这个实例展示了如何结合HTML、CSS和JavaScript来实现复杂的3D动画效果。通过学习和实践，你可以更深入地理解这些技术，并将其应用到你的项目中。

如果对你有帮助，点赞👍、收藏💖、关注🔔是我更新的动力！👋🌟🚀

🎉 往期精彩回顾

Element-Plus 实现动态渲染图标教程

  • 702阅读 · 29点赞 · 15收藏

MyBatis-Plus分页接口实现教程：Spring Boot中如何编写分页查询

  • 473阅读 · 5点赞 · 5收藏

Element-Plus下拉菜单边框去除教程

  • 701阅读 · 19点赞 · 27收藏

Web实现猜数字游戏：JavaScript DOM基础与实例教程

  • 662阅读 · 11点赞 · 9收藏

Web实现名言生成器：JavaScript DOM基础与实例教程

  • 1089阅读 · 21点赞 · 18收藏

Web实现井字棋游戏：JavaScript DOM基础与实例教程

  • 710阅读 · 29点赞 · 18收藏

Web实现表格单选全选与反选操作：JavaScript DOM基础与实例教程

  • 866阅读 · 16点赞 · 9收藏

H5实现Web ECharts教程：轻松创建动态数据图表

  • 1167阅读 · 21点赞 · 9收藏

浏览器DOM操作基础：禁用右键菜单与阻止文字选中

  • 1021阅读 · 33点赞 · 24收藏

缤纷浏览器 —— 一键换肤，个性随心换（H5实现浏览器换肤效果）

  • 717阅读 · 11点赞 · 6收藏

广州5k前端面试题惊呆我！！！（内容太肝，谨慎入内）

  • 829阅读 · 29点赞 · 24收藏

计算机专业学生的成长之路：超越课堂的自我提升策略

  • 857阅读 · 33点赞 · 26收藏

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1554208.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

从关键词到上下文：GPT 如何重新定义 SEO 策略

从关键词到上下文：GPT 如何重新定义 SEO 策略

如何利用GPT技术革新SEO内容创建&#xff1f; 新的 SEO 格局 探索 SEO 的快速变化&#xff0c;重点关注从以关键字为中心的策略到更深入地了解用户意图和上下文的转变。 GPT 简介及其对内容创建、用户参与和搜索引擎优化 (SEO) 的革命性影响。 了解 GPT&#xff1a;技术范式转…
阅读更多...
Stable Diffusion 模型下载：epiCPhotoGasm（真实、照片）

Stable Diffusion 模型下载：epiCPhotoGasm（真实、照片）

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里&#xff0c;订阅后可阅读专栏内所有文章。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八 下载地址 模型介绍 该模型对照片是什么有很高的了解&#xff0c;所以…
阅读更多...
Stable Diffusion之核心基础知识和网络结构解析

Stable Diffusion之核心基础知识和网络结构解析

Stable Diffusion核心基础知识和网络结构解析 一. Stable Diffusion核心基础知识1.1 Stable Diffusion模型工作流程1. 文生图(txt2img)2. 图生图3. 图像优化模块 1.2 Stable Diffusion模型核心基础原理1. 扩散模型的基本原理2. 前向扩散过程详解3. 反向扩散过程详解4. 引入Late…
阅读更多...
农学院智慧农业产教融合基地解决方案

农学院智慧农业产教融合基地解决方案

第一章 背 景 1.1国际数字农业发展概况 随着全球信息化、智能化技术的快速发展&#xff0c;数字农业作为现代农业发展的重要方向&#xff0c;正日益受到国际社会的广泛关注。数字农业依托物联网、大数据、云计算、人工智能等现代信息技术&#xff0c;实现农业生产全过程的智能…
阅读更多...
软件接口安全设计规范及审计要点

软件接口安全设计规范及审计要点

1.token授权安全设计 2.https传输加密 3.接口调用安全设计 4.日志审计里监控 5.开发测试环境隔离&#xff0c;脱敏处理 6.数据库运维监控审计 项目管理全套资料获取&#xff1a;软件开发全套资料_数字中台建设指南-CSDN博客
阅读更多...
GRE、VPN实验报告

GRE、VPN实验报告

一、实验拓扑图 二、实验要求 1、按照图示配置IP地址 2、在R1和R3上配置默认路由使公网区域互通 3、在R1和R3上配置GRE VPN&#xff0c;使两端私网能够互相访问&#xff0c;Tunnel口IP地址如图 4、在R1和R3上配置RIPv2或者ospf或者静态&#xff0c;来传递两端私网路由 三、…
阅读更多...
golang import引用项目下其他文件内函数

golang import引用项目下其他文件内函数

初始化项目 go mod init [module名字] go mod init project 项目结构 go mod 文件 代码 需要暴露给外界使用的变量/函数名必须大写 在main.go中引入&#xff0c;当前项目模块名/要引用的包名 package mainimport (// 这里的路径开头为项目go.mod中的module"project/…
阅读更多...
OpenGL的MVP矩阵理解

OpenGL的MVP矩阵理解

OpenGL的MVP矩阵理解 右手坐标系 右手坐标系与左手坐标系都是三维笛卡尔坐标系&#xff0c;他们唯一的不同在于z轴的方向&#xff0c;如下图&#xff0c;左边是左手坐标系&#xff0c;右边是右手坐标系 OpenGL中一般用的是右手坐标系 1.模型坐标系&#xff08;Local Space&…
阅读更多...
springboot项目中如何实现邮件告警功能(监控平台服务模拟)

springboot项目中如何实现邮件告警功能(监控平台服务模拟)

介绍 模拟服务器故障&#xff0c;然后实现邮件告警 一、首先配置邮件的maven依赖 代码如下&#xff1a; <!--邮件告警--><!-- Spring Boot的邮件发送依赖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spri…
阅读更多...
递归方法的理解

递归方法的理解

递归方法调用 &#xff1a;方法自己调用自己的现象就称为递归。 递归的分类 : 直接递归、间接递归。 直接递归&#xff1a;方法自身调用自己 public void methodA (){ methodA (); } 间接递归&#xff1a;可以理解为A()方法调用B()方法&#xff0c;B()方法调用C()方法&am…
阅读更多...
3.Labview字符串与路径精讲(下) — 字符串及路径的用法汇总

3.Labview字符串与路径精讲(下) — 字符串及路径的用法汇总

本章讲解labview中的字符串和路径具体实践用例&#xff0c;从前面板字符串属性到后面板字符串函数应用做出详细概述&#xff0c;通过本文的学习希望大家了解到字符串及路径在labview编程中的重要地位。 本系列文章为labview 从基础到强化到精通的学习文章&#xff0c;大家可以随…
阅读更多...
【linux】基础IO |文件操作符

【linux】基础IO |文件操作符

需要掌握&#xff1a;操作文件&#xff0c;本质&#xff1a;进程操作文件。进程和文件的关系 向文件中写入&#xff0c;本质上向硬件中写入->用户没有权利直接写入->操作系统是硬件的管理者&#xff0c;我们可以通过操作系统往硬件写入->操作系统必须提供系统调用&…
阅读更多...
Linux 学习之路--工具篇--yum

Linux 学习之路--工具篇--yum

前面介绍了权限有关的内容&#xff0c;这里继续介绍有关Linux里面常用的工具之一yum 目录 一、简单介绍 <1> 源代码安装 <2>rpm 包安装 <3>yum / apt-get(ubuntu) 安装 二、简单使用 <1>安装包介绍 <2> yum 的基本指令 -- install <…
阅读更多...
本地部署的stable diffusion 如何更新controlnet？

本地部署的stable diffusion 如何更新controlnet？

stable diffusion 未启动状态 点击“版本管理” 点击“扩展” 找到controlnet&#xff0c;点击右边的“更新”按钮 完成&#xff01;
阅读更多...
Linux 动静态库的制作,使用和加载

Linux 动静态库的制作,使用和加载

Linux 动静态库的制作,使用和加载 一.前置说明1.mylib.h2.mylib.c3.mymath.h mymath.c4.如何制作库 二.动静态库的制作1.静态库的制作1.制作2.使用一下静态库,验证是否成功打包 2.动态库的制作1.编译.c源文件文件生成.o目标文件2.打包生成动态库3.编写makefile文件,自动化制作动…
阅读更多...
Linux系统中安装一些常用的插件备用

Linux系统中安装一些常用的插件备用

Linux系统中安装一些常用的插件备用 1.安装wget yum -y install wget 2.安装vim yum -y install vim-enhanced 3.更换yum源为国内的阿里云源&#xff08;选择&#xff09; 1、备份CentOS-Base.repo mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.…
阅读更多...
42 ajax 下载文件未配置 responseType blob 导致的文件异常

42 ajax 下载文件未配置 responseType blob 导致的文件异常

前言 这是一个最近的关于文件下载碰到的一个问题 主要的情况是, 基于 xhr 发送请求, 获取下载的文件 然后 之后 xhr 这边拿到 字节序列之后, 封装 blob 来进行下载 然后 最开始我们这边没有配置 responseType 为 blob, arraybuffer, 然后 导致下载出来的 文件大小超过了…
阅读更多...
许可型DeFi 项目NEOPIN：在合规的框架下推动DeFi的创新

许可型DeFi 项目NEOPIN：在合规的框架下推动DeFi的创新

合规化已成 DeFi 的主流方向 过去的几年里&#xff0c;全球金融市场见证了 DeFi 的快速增长。DeFi 通过提供无需中介的交易和借款等金融服务&#xff0c;为用户带来前所未有的便利。然而&#xff0c;其匿名性和去中心化的特性也为监管和安全带来挑战 —— DeFi项目的透明度不足…
阅读更多...
机器学习概论—增强学习

机器学习概论—增强学习

机器学习概论—增强学习 强化学习（Reinforcement Learning, RL）或者说是增强学习，是机器学习的一个领域，旨在使智能体通过与环境的交互学习如何做出决策，它是关于在特定情况下采取适当的行动来最大化奖励。它被各种软件和机器用来寻找在特定情况下应采取的最佳行为或路径…
阅读更多...
马上蓝桥杯了，干货总结动态规划专题，祝你考场爆杀（基础篇）猫粮规划 接苹果 魔族密码 最大正方形 最大正方形 2 奶牛比赛

马上蓝桥杯了，干货总结动态规划专题，祝你考场爆杀（基础篇）猫粮规划 接苹果 魔族密码 最大正方形 最大正方形 2 奶牛比赛

目录 猫粮规划 思路&#xff1a; 接苹果 思路&#xff1a; 魔族密码 思路&#xff1a; 最大正方形 思路&#xff1a; 最大正方形 2 思路&#xff1a; 奶牛比赛 ​编辑 思路&#xff1a; 猫粮规划 思路&#xff1a; 每种食物都有两种状态&#xff0c;记忆化d…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023