抖音超火的3d照片墙，h5+css3+js实现

最新推荐文章于 2024-07-27 23:01:21 发布
最新推荐文章于 2024-07-27 23:01:21 发布
阅读量3.1k 收藏 35
点赞数 7
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64284850/article/details/124396828
版权

3D旋转 CSS动画 HTML布局 图片轮播 交互设计
关键词由CSDN通过智能技术生成

 如图所示，利用动画过滤和3d旋转

<!DOCTYPE html>
<html lang="en" ondragstart="return false">

<head>
      <meta charset="UTF-8">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>my program</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;
                  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;
            }

            .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;
                  transform: rotateX(90deg);

            }
      </style>
</head>

<body>
      <div class="perspective">
            <div class="wrap" id="imgwrap">
                  <img class="f1" src="img/12.jpg" />
                  <img class="f1" src="img/13.jpg" />
                  <img class="f1" src="img/14.jpg" />
                  <img class="f1" src="img/15.jpg" />
                  <img class="f1" src="img/16.jpg" />
                  <img class="f1" src="img/1.jpg" />
                  <img class="f1" src="img/2.jpg" />
                  <img class="f1" src="img/3.jpg" />
                  <img class="f1" src="img/4.jpg" />
                  <img class="f1" src="img/5.jpg" />
                  <img class="f1" src="img/6.jpg" />
                  <img class="f1" src="img/7.jpg" />
                  <img class="f1" src="img/5.jpg" />
                  <img class="f1" src="img/6.jpg" />
                  <img class="f1" src="img/7.jpg" />
                  <img class="f1" src="img/8.jpg" />
                  <img class="f1" src="img/9.jpg" />
                  <img class="f1" src="img/10.jpg" />
                  <img class="f1" src="img/11.jpg" />

                  <img class="f1" src="img/17.jpg" />
                  <img class="f1" src="img/18.jpg" />
                  <img class="f1" src="img/19.jpg" />
                  <img class="f1" src="img/20.jpg" />
                  <img class="f1" src="img/21.jpg" />
                  <img class="f1" src="img/22.jpg" />
                  <img class="f1" src="img/23.jpg" />
                  <img class="f1" src="img/24.jpg" />
                  <img class="f1" src="img/25.jpg" />
                  <img class="f1" src="img/26.jpg" />
                  <img class="f1" src="img/27.jpg" />
                  <img class="f1" src="img/28.jpg" />
                  <img class="f1" src="img/29.jpg" />
                  <img class="f1" src="img/30.jpg" />

                  <img class="f2" src="img/1.jpg" />
                  <img class="f2" src="img/2.jpg" />
                  <img class="f2" src="img/3.jpg" />
                  <img class="f2" src="img/4.jpg" />
                  <img class="f2" src="img/5.jpg" />

                  <img class="f2" src="img/9.jpg" />
                  <img class="f2" src="img/10.jpg" />
                  <img class="f2" src="img/11.jpg" />
                  <img class="f2" src="img/12.jpg" />
                  <img class="f2" src="img/25.jpg" />
                  <img class="f2" src="img/26.jpg" />
                  <img class="f2" src="img/27.jpg" />
                  <img class="f2" src="img/28.jpg" />
                  <img class="f2" src="img/29.jpg" />
                  <img class="f2" src="img/30.jpg" />
                  <img class="f2" src="img/13.jpg" />
                  <img class="f2" src="img/14.jpg" />
                  <img class="f2" src="img/15.jpg" />
                  <img class="f2" src="img/16.jpg" />
                  <img class="f2" src="img/17.jpg" />
                  <img class="f2" src="img/18.jpg" />
                  <img class="f2" src="img/19.jpg" />
                  <img class="f2" src="img/20.jpg" />
                  <img class="f2" src="img/21.jpg" />
                  <img class="f2" src="img/22.jpg" />
                  <img class="f2" src="img/23.jpg" />
                  <img class="f2" src="img/24.jpg" />
                  <img class="f2" src="img/6.jpg" />
                  <img class="f2" src="img/7.jpg" />
                  <img class="f2" src="img/5.jpg" />
                  <img class="f2" src="img/6.jpg" />
                  <img class="f2" src="img/7.jpg" />
                  <img class="f2" src="img/8.jpg" />

                  <img class="f3" src="img/1.jpg" />
                  <img class="f3" src="img/2.jpg" />
                  <img class="f3" src="img/11.jpg" />
                  <img class="f3" src="img/12.jpg" />
                  <img class="f3" src="img/25.jpg" />
                  <img class="f3" src="img/26.jpg" />
                  <img class="f3" src="img/27.jpg" />
                  <img class="f3" src="img/3.jpg" />
                  <img class="f3" src="img/4.jpg" />
                  <img class="f3" src="img/5.jpg" />


                  <img class="f3" src="img/16.jpg" />
                  <img class="f3" src="img/17.jpg" />
                  <img class="f3" src="img/18.jpg" />
                  <img class="f3" src="img/10.jpg" />

                  <img class="f3" src="img/28.jpg" />
                  <img class="f3" src="img/29.jpg" />
                  <img class="f3" src="img/30.jpg" />
                  <img class="f3" src="img/13.jpg" />

                  <img class="f3" src="img/19.jpg" />
                  <img class="f3" src="img/20.jpg" />
                  <img class="f3" src="img/21.jpg" />
                  <img class="f3" src="img/22.jpg" />
                  <img class="f3" src="img/23.jpg" />
                  <img class="f3" src="img/24.jpg" />
                  <img class="f3" src="img/9.jpg" />
                  <img class="f3" src="img/14.jpg" />
                  <img class="f3" src="img/15.jpg" />
                  <img class="f3" src="img/6.jpg" />
                  <img class="f3" src="img/7.jpg" />
                  <img class="f3" src="img/5.jpg" />
                  <img class="f3" src="img/6.jpg" />
                  <img class="f3" src="img/7.jpg" />
                  <img class="f3" src="img/8.jpg" />


                  <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) {
                        ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px)";
                        ele.style.transition = "1s " + (len - index) * 0.1 + "s";

                  });
                  Array.prototype.forEach.call(oImg2, function (ele, index, self) {
                        ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(240px)";
                        ele.style.transition = "1s " + (len - index) * 0.1 + "s";

                  });
                  Array.prototype.forEach.call(oImg3, function (ele, index, self) {
                        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) {
                  //       ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(350px)";
                  //       ele.style.transition = "1s " + (len - index) * 0.1 + "s";

                  // });

            }
            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>

代码已放出，需要可以自取

北游当南归
关注
JS实现的非常漂亮的3D立体照片墙显示效果
07-23
JS实现的非常漂亮的3D立体照片墙显示效果
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实现3D炫酷相册（附源码）
2302_81141145的博客
07-13 556
利用基础的html和css实现3D相册（可自我添加照片）本人初衷是为了验证所学的知识，顺便想逗女朋友开心😊（如若作为礼物送人还是有点low的）各位码友尽可提出疑问，在下定尽自己的绵薄之力，共同进步（还望各位码友一键三连支持一下，在此谢过了)废话完毕，直接上源码：（CV即可）
H5实现3D旋转照片墙教程
interest_ing_的博客
03-28 1415
CSS的`transform`属性允许我们对元素进行2D或3D的转换。这包括旋转、缩放、移动和倾斜等操作。在3D转换中，`rotateX`、`rotateY`和`translateZ`是常用的函数，它们分别用于围绕X轴和Y轴旋转以及沿Z轴移动。
前端练习＜Html&CSS＞——照片墙（附完整代码及实现效果）
最新发布
Blusher1的博客
07-27 3040
​这个小练习也来源于b站up小K师兄，大家可以通过下面的链接学习哦~up讲的非常详细。 纯CSS写一个简单酷炫的照片墙效果～ 先看一下这个照片墙的效果： 1.鼠标没有放到图片上时，照片同比例，每张照片都有倒影的效果。 2.然后是鼠标放置图片上的效果，图片被放大，其他照片旋转缩放，这里需要注意，左右两边的照片是对称倾斜的。
HTML实现3D照片旋转墙
gs1we1的博客
04-21 6411
html
3D立体照片墙—HTML
m0_59273150的博客
09-15 3171
文章目录 1、CSS动画样式 2、HTML图片放置 前言 首先呢，要先理解几个重要知识点，然后梳理思路，构建3d盒子模型、3d动画执行程序以及将动画应用到元素、3d动画样式等 1、css动画样式 <1>用盒子模型作为载体，将动画应用到元素，代码如下： >>>简易分析： 动画的样式，从一种样式渐变到，另一种样式中，使用css动画，必须先为动画指定一些...
HTML + CSS实现图片3D旋转效果
前端、python爱好者
05-28 9646
**## 标题 用CSS加上HTML做一个3D旋转木马** 学了CSS的动画，仿照着自己做了一个3D旋转的小动画。先看看图片 这里是截图的图片，看不出来动态效果，可以把CSS和HTML复制下来直接放在文本编辑器中进行图片路径的修改 然后把格式转变成 .html 的就好了 下面是代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ......
H5+css3+js搭建带验证码的登录页面
10-14
【H5+CSS3+JS搭建带验证码的登录页面】是一个综合性的前端开发主题，它涉及到HTML5、CSS3和JavaScript三个核心技术。在这个项目中，开发者将创建一个包含验证码功能的用户登录界面，以增强安全性并防止自动化机器人...
抖音超火罗马时钟h5实现
10-01
总之，实现抖音上流行的罗马时钟H5涉及到了HTML5、CSS3和JavaScript的综合运用，通过巧妙的设计和编程，我们可以在网页上创建出一款既美观又实用的时钟应用。这一过程中，不仅可以学习到前端开发的基础知识，还能...
H5+CSS3幻灯片图片切换代码.rar
06-23
H5+CSS3幻灯片图片切换代码.rar H5+CSS3幻灯片图片切换代码.rar H5+CSS3幻灯片图片切换代码.rar H5+CSS3幻灯片图片切换代码.rar H5+CSS3幻灯片图片切换代码.rar H5+CSS3幻灯片图片切换代码.rar H5+CSS3幻灯片图片...
HTML5照片墙
03-18
HTML5 照片墙 代码 一看就会 需要的可以下载
3d照片墙html5.
06-06
照片墙html5
JS+CSS超酷3D照片墙
07-01
JS+CSS=>超酷3D照片墙，不下不知道，下了想推荐！
HTML5 CSS3 3D JQuery 实现照片墙
08-12
HTML5+css3制作的超酷3D照片墙jQuery特效代码.rar 实现特炫照片墙及照片库 HTML5+css3制作的超酷3D照片墙jQuery特效代码.rar 实现特炫照片墙及照片库
js 3D相册 js 3D相册
04-20
js 3D相册；js 3D相册；js 3D相册；js 3D相册；js 3D相册；
h5+css+js音乐播放器
08-21
其中，利用H5、CSS和JavaScript（JS）来开发音乐播放器是一个常见的实践，它使得用户可以直接在网页上享受音乐而无需额外的插件或应用程序。本文将深入探讨如何利用这些技术实现一个基础的音乐播放器。 一、...
爱旅游网站H5+CSS3+JS+JQuery
06-03
在本项目"爱旅游网站H5+CSS3+JS+JQuery"中，开发者利用了现代Web技术构建了一个集成了多种交互功能的在线旅游平台。这个网站旨在提供国内外的景点、酒店和机票信息，帮助用户方便地规划和预订旅行。下面我们将详细...
原生js实现3D照片墙
冰雪为融的博客
07-04 6202
效果：1、点击Start View进入照片墙2、只有一张图片是在中间显示，其他图片在中间的图片两侧随机排序，并且随机旋转一定的角度，层级也是随机的哦3、点击上面的导航条，可以让对应的图片在中间显示4、点击中间的图片该照片翻转，显示背面（照片的描述信息）实现过程：1、用数据生成结构（模拟的数据，此处不再提供）2、对所有图片进行排序3、计算两侧图片的随机范围4、控制图片翻转5、控制导航按钮切换图片6、...
H5+css3+js实现搜索框下拉列表
06-02
好的，以下是一个基本的搜索框下拉列表的实现步骤： 1. HTML结构：在HTML中创建一个输入框和一个下拉列表的容器，下拉列表的容器初始设置为隐藏状态。 ```html <div class="search-container"> <input type="text" placeholder="请输入搜索关键字"> <div class="search-list-container"> <ul class="search-list"></ul> </div> </div> ``` 2. CSS样式：设置输入框的样式和下拉列表容器的样式，下拉列表容器的初始状态设置为 `display:none` 。 ```css .search-container { position: relative; } input[type="text"] { width: 300px; height: 30px; padding: 5px; border: 1px solid #ccc; border-radius: 5px; } .search-list-container { position: absolute; top: 35px; left: 0; z-index: 99; width: 300px; max-height: 200px; overflow-y: auto; background: #fff; border: 1px solid #ccc; border-radius: 5px; display: none; } ``` 3. JS交互：监听输入框的键盘输入事件，在输入框中输入内容时，向后台发送请求获取匹配的搜索结果，将结果渲染到下拉列表中，并将下拉列表容器设置为显示状态。 ```javascript const input = document.querySelector('input[type="text"]'); const searchListContainer = document.querySelector('.search-list-container'); const searchList = document.querySelector('.search-list'); input.addEventListener('input', function(e) { const keyword = e.target.value; if (keyword.trim()) { // 发送请求获取匹配的搜索结果 const searchResults = getSearchResults(keyword); renderSearchList(searchResults); searchListContainer.style.display = 'block'; } else { searchList.innerHTML = ''; searchListContainer.style.display = 'none'; } }); function getSearchResults(keyword) { // 向后台发送请求获取搜索结果 const results = ['搜索结果1', '搜索结果2', '搜索结果3']; return results; } function renderSearchList(results) { let html = ''; results.forEach(result => { html += `<li>${result}</li>`; }); searchList.innerHTML = html; } ``` 以上就是一个简单的搜索框下拉列表的实现方法，您可以根据自己的需求进行样式和交互的修改。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值