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

已于 2024-03-28 12:12:04 修改
阅读量1.4k 收藏 13
点赞数 11
分类专栏： 前端专栏 文章标签： 3d 前端 javascript html5 web
于 2024-03-28 12:01:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/interest_ing_/article/details/137107173
版权

🌟 前言

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

在这里插入图片描述

文章目录

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收藏
洛可可白
关注
专栏目录
html5立体照片墙效果,js实现3D照片墙效果
weixin_30091863的博客
06-03 2762
聊一下心得：CSS写得好，真的可以省很多js代码哈，写起来也简单很多，所以要好好掌握js哈，所以这里也提供了css代码，如果您觉得您的css写得不错，可以直接看js代码哦效果：1、点击Start View进入照片墙2、只有一张图片是在中间显示，其他图片在中间的图片两侧随机排序，并且随机旋转一定的角度，层级也是随机的哦3、点击上面的导航条，可以让对应的图片在中间显示4、点击中间的图片该照片翻转，显示...
CSS3 3D 转换
最新发布
lly202406的博客
08-24 1102
CSS3 3D 转换是一种强大的技术，它允许开发者创建出令人印象深刻的3D视觉效果，而无需复杂的JavaScript或第三方库。通过使用CSS3的3D转换功能，设计师可以轻松地将元素旋转、倾斜、移动或缩放，以创建出深度和透视感。在本文中，我们将探讨CSS3 3D转换的基础知识，包括如何使用它们以及一些实际的应用示例。
3D旋转照片墙的CSS
09-24
网页制作中3D旋转照片墙的CSS,搭配同名html代码可以呈现出，3D旋转的酷炫照片效果，照片可以自己设置
HTML5 CSS3 3D JQuery 实现照片墙
08-11
HTML5+css3制作的超酷3D照片墙jQuery特效代码.rar 实现特炫照片墙及照片库
HTML实现3D照片旋转墙
gs1we1的博客
04-21 6433
html
php 图片 3d旋转图片,html5实现图片的3D旋转效果
weixin_36019543的博客
03-23 505
我们先来看一下实现效果：(学习视频分享：html视频教程)H5旋转3D相册，鼠标放置暂停，图片灰度级为0，有放大效果。该实例运用H5和CSS3动画效果，未用javascript。提高了本人对CSS3 新属性的了解及掌握。完整代码如下所示：HTML5 3D旋转图片相册 可鼠标悬停*{padding: 0;margin: 0;border: none;outline: none;box-sizing:...
HTML5照片墙
03-18
HTML5 照片墙 代码 一看就会 需要的可以下载
3D动画效果照片墙demo
dbfgefai009910的博客
01-15 1225
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>html,body {margin...
H5 3D全景.rar_93O_HTML5 3D全景_h5 3D照片墙_three.js_three.js 3D
07-15
本资源"HTML5 3D全景_h5 3D照片墙_three.js_three.js 3D"正是围绕这个主题展开，通过一个实例展示了如何使用three.js来实现3D全景效果。 首先，我们来看“3D全景”这一概念。3D全景是指通过多张视角的照片拼接，...
html5实现立体照片墙效果,利用css制作3D照片墙效果
weixin_39536728的博客
06-03 2617
利用css制作3D照片墙，具体代码如下所示：无标题文档 以上代码是准备工作，在html代码的body主体中放了一个div，里面包着你想要显示在照片墙上的照片，数量可以任意。接着开始着手写样式。body{perspective: 5800px;}以上代码是为照片墙设置一个足够大的3D视距，至少能容下所有图片的运动轨迹。img{position:absolute;heig...
html5 svg图片可3d旋转的扁平风格照片墙画廊模板源码
03-20
资源描述： HTML5模板源码各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。别再犹豫了，一起加入这个源码的世界吧！博主提供各种支持，欢迎合作共赢。 效果演示地址： ...
照片墙_HTML5制作照片墙_
09-29
这是一个利用HTML5制作的照片墙，用于参考吗，希望对大家有用
HTML5 3D图片阴影翻转动画 效果很酷 xueh5.com
06-16
款3D特效可以为你的图片增加阴影的效果，而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。这和之前分享的HTML5 3D动画HTML5 3D正方体旋转动画有着类似的效果 参考示例：http://www.xueh5.com/share/detail-3609.html
h5自动旋转相册.zip
07-14
一个会自动旋转的相册、抖音那种的。文件很小，可以下载看看
照片墙 h5源码
07-16
这是一个照片墙，使用html、js 、css编写而成，照片悬浮可以放大。
HTML5 3D图片旋转效果
12-06
HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果
HTML+CSS 旋转照片墙！源代码（简易动画干货快收藏！！）
m0_67391870的博客
06-03 1446
拿走请三连，并注明出处新手上路，路过的大佬请多多指教~动画特效为11张照片，环绕着旋转（照片可自改添加，源代码中用到的照片未上传）照片墙body{margin:0px;}#di
H5实战(一)：照片墙效果
weiweitb8的博客
09-05 7328
照片墙的思路与实现 1.实现思路 ＊首先在html中插入图片，设置整个容器的整体大小，然后设置每个图片的宽度，并为它们添加边框边距等，设置成为相框的效果。 ＊然后为每个图片设置旋转角度，top，left等，此时每个图片都有了一定的倾斜度。 ＊最后制作鼠标悬浮效果，当鼠标放置时，使图片旋转角度为0，图片变大，并使其显示在最上层（可设置z-index实现），为其设置动画过渡效果。 2.代码实
JS实现H5图片3D旋转动画
热门推荐
lensgcx的博客
04-26 1万+
JS实现H5图片3D旋转动画
用html css js 做一个照片墙网页
05-30
好的，以下是一个简单的照片墙网页的 HTML、CSS 和 JavaScript 代码： HTML 代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>照片墙</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="header"> <h1>照片墙</h1> </div> <div class="gallery"> <img src="img/photo1.jpg" alt="Photo 1"> <img src="img/photo2.jpg" alt="Photo 2"> <img src="img/photo3.jpg" alt="Photo 3"> <img src="img/photo4.jpg" alt="Photo 4"> <img src="img/photo5.jpg" alt="Photo 5"> <img src="img/photo6.jpg" alt="Photo 6"> <img src="img/photo7.jpg" alt="Photo 7"> <img src="img/photo8.jpg" alt="Photo 8"> </div> <script src="script.js"></script> </body> </html> ``` CSS 代码： ``` body { background-color: #fff; font-family: Arial, sans-serif; margin: 0; } .header { background-color: #333; color: #fff; padding: 20px; text-align: center; } .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 20px; margin: 20px; } .gallery img { width: 100%; height: auto; object-fit: cover; cursor: pointer; transition: transform 0.3s ease; } .gallery img.active { transform: scale(2); } ``` JavaScript 代码： ``` // 点击图片放大 const images = document.querySelectorAll('.gallery img'); images.forEach(image => { image.addEventListener('click', () => { image.classList.toggle('active'); }); }); ``` 这个照片墙网页使用了相同的 HTML 代码和 CSS 样式来创建照片墙，并使用了 JavaScript 来实现点击图片放大。你可以将图片路径替换为自己的图片，然后将 HTML、CSS 和 JavaScript 代码保存为相应的文件，然后就可以在浏览器中打开查看效果了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

洛可可白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值