3D旋转照片墙(可鼠标拖动 也可自动旋转 自动播放音频)

已于 2023-12-06 14:26:24 修改
阅读量645 收藏 11
点赞数 9
文章标签： 3d css css3 html html5 javascript
于 2023-12-06 14:20:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50083085/article/details/134830408
版权 
<!DOCTYPE html>
<html lang="en" ondragstart="return false">

<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name="referrer" content="no-referrer">
    <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: 500px;
            
        }

        .wrap {
            /* 3d */
            /* width: 135px; */
            height: 260px;
            /* margin: 100px auto; */
            margin-left: 20px;
         
            position: relative;
            top:-20px;
            /* border: 1px solid red; */
            transform: rotateX(0deg) rotateY(0deg);
            transform-style: preserve-3d;

        }

        .wrap img {
            display: block;
            /* 绝对定位 */
            position: absolute;
            width: 100%;
            height: 230px;
            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);
 
        }
        .f3{
            
/* -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.5))); */
  /* -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, .5)); */
        }
      #tt{
          width: 135px;
            height: 260px;
            margin: 100px auto;
            position: relative;
       
            transform-style: preserve-3d;

             animation: run 30s linear infinite;
      }
       #tt:hover{
        /* 鼠标放入动画即停止 */
	animation-play-state:paused;
       }
         /*采用@keyframes 规则创建run动画。*/

        @keyframes run {

                 0% {
                transform: rotateX(0deg) rotateY(0deg);

            }

            25% {
                transform: rotateX(10deg) rotateY(90deg);

            }

            50% {
                transform: rotateX(0deg) rotateY(180deg);

            }

            75% {
                transform: rotateX(-10deg) rotateY(270deg);

            }

            100% {
                transform: rotateX(0deg) rotateY(360deg);

            }
        }

    </style>
</head>

<body>
    <!-- 盒子容器 -->
    <div class="perspective">
        <audio controls autoplay="autoplay" loop="loop" id="bgmusic" style="display: none;">
            <source src="https://www.ihaoge.net/server/1/140226512.mp3" type="audio/mpeg"  >
        </audio>
      
        <div id="tt">
        <div class="wrap" id="imgwrap">
            <!-- 引入图片值页面 -->
            <img class="f1" src="https://picsum.photos/id/237/200/300" />
            <img class="f1" src="https://picsum.photos/id/237/200/300" />
            <img class="f1" src="https://picsum.photos/id/237/200/300" />
            <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="https://picsum.photos/id/237/200/300" />

            <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="https://picsum.photos/id/237/200/300" />
            <img class="f1" src="https://picsum.photos/id/237/200/300" />

            <!-- 引入图片值页面 -->
            <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="https://picsum.photos/id/237/200/300" />
            <img class="f2" src="https://picsum.photos/id/237/200/300" />
            <img class="f2" src="https://picsum.photos/id/237/200/300" />
            <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="https://picsum.photos/id/237/200/300" />
            <img class="f3" src="https://picsum.photos/id/237/200/300" />
            <img class="f3" src="https://picsum.photos/id/237/200/300" />


            <p></p>
        </div>
        </div>
    </div>
   </script>
  
    <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>

效果图如下：
在这里插入图片描述

谷歌浏览器自动播放音频好像播放不了，上述代码在Microsoft Edge浏览器能自动播放音频，Microsoft Edge设置，在浏览器地址栏中输edge://settings/content/mediaAutoplay 并按下 Enter 键，如图
在这里插入图片描述

lory代码搬运工
关注
  • 9
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
3d旋转球体照片墙可参考
05-31
3d旋转球体照片墙可用作参考
3D旋转照片墙html
12-26
由14张照片环绕而成的照片墙，可以通过鼠标左右拉实现左右查看照片的功能，也可以往上下移动，可俯视或仰视照片墙
3D旋转相册（附源码+素材）
weixin_45345143的博客
12-03 1万+
3D立体选择相册制作，给你的女神最棒的效果，实现的过程都是用的win10电脑自带的软件实现的，可操作性强，无需额外安装软件。
Html 3D旋转相册制作
alicema1111的博客
01-10 2036
这篇博客针对编写代码，代码整洁，规则，易读。 学习与应用推荐首选。
3d旋转相册，进阶加薪全靠它
最新发布
m0_46608024的博客
03-26 624
webpack的loader到底是什么样的？两小时带你写一个自己loader。webpack的loader到底是什么样的？两小时带你写一个自己loader。打开全栈工匠技能包-1小时轻松掌握SSR。谁说前端不用懂安全，XSS跨站脚本的危害。谁说前端不用懂安全，XSS跨站脚本的危害。网易内部VUE自定义插件库NPM集成。生产环境下如歌部署Node.js。两小时精通jq+bs插件开发。
HTML 3d立体旋转相册
weixin_61370021的博客
03-05 2894
效果：（实际是动态旋转） 目录：（根据自己需要替换图片就行了 大照片是400*400 小照片是100*100） 提取码：1122 代码链接 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3d相册</title> <style type="text/css"&gt
【前端领域】3D旋转超美相册（HTML+CSS）
好好读书
02-12 4134
【前端领域】3D旋转超美相册（HTML+CSS） 3D旋转相册 本文是一篇简单的前端代码，主要内容仅包含 HTML，CSS 等内容 主要为 CSS 1、HTML代码 2、CSS样式 3、插件等 4、旋转特效 5、图片 6、鼠标放置效果 7、可添加背景音乐，背景图等
每日一技：给女友用代码做一个3D旋转相册，每天亿遍忘记初恋~
m0_72557783的博客
07-04 5056
不会表白？！我来教你给女朋友或者正在追求的妹子一点小惊喜~今天这篇文章就是演示给女友做一个3D旋转相册，学会的小伙伴可以给自己的女朋友或者喜欢的女生做一个，相比几百上千的礼物，零成本的技术实现的3D选择相册又走心，还可以用来当壁纸，赶快先收藏起来！...
基于Vue的3D饼图，可进行拖动旋转、缩放、自动旋转~
08-22
基于Vue的3D饼图，可进行拖动旋转、缩放、自动旋转~
CSS3自动旋转正方体3D特效
07-28
CSS3自动旋转正方体3D特效是一款基于css3 keyframes属性制作的图片相册自动旋转立方体特效。
3D旋转相册html+css代码分享
m0_53602804的博客
04-16 8801
html+css小练手
3D旋转相册.zip
11-06
网上很多相同的自己也弄了一下看着还不错 有需要的小伙伴可以下载来直接替换图片就可以使用 记得图片名称必须一样
程序员给女朋友用HTML5制作的3D相册
04-21
程序员给女朋友用HTML5制作的3D相册 感觉挺漂亮，自己分析了一下。 整理里一个自己可以换相片
3d旋转相册源码
12-16
3d旋转相册源码，用纯CSS3代码写的一个小案例，难度不大
用html+CSS实现的3D旋转相册（表白代码）
06-03
使用html和css知识实现的一个网页立体相册，可以左右上下多角度旋转，可以添加背景照片，文件夹里面的照片可以换成自己想换的，不过照片的名字要和原来的对应上，即使没有前端的知识，也能简单操作。
3d相册旋转
10-20
利用html和css3技术实现3d图片库的自动旋转，可以更好的浏览图片
3D旋转相册代码及详细使用教程
热门推荐
weixin_46015333的博客
08-19 3万+
相信很多小伙伴看着短视频里的3D旋转相册很想要吧，下面就让我们来看看它的代码及使用方法吧！ 效果展示 代码展示 1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>3D立体动态相册</title> <link rel="stylesheet" type="text/css" href="css/css.css"/> <
如何用css实现一个3D旋转照片墙
qq_53983648的博客
11-14 3292
关于入门级css实现3D照片墙效果案例
3d旋转相册代码源码_3D旋转相册
weixin_39693101的博客
11-27 4534
最近3d相册可谓是很火，小编的朋友圈就被刷屏了。再加上后台很多小可爱留言说想要关于3d旋转相册，但是大多数人又不会编程，代码什么的敲敲打打太费劲了，考虑到这些，小编找朋友做了这个相册的代码，一共有两个奥。获取方式在文末。下面是特效展示时间：意味着什么？意味着“抬头望见北斗星”。这北斗系统的名字起的意味着什么？意味着“抬头望见北斗星”。这北斗系统的名字起的 然后是教你们怎么...
html3d旋转照片墙
08-13
要实现HTML中的3D旋转照片墙效果，你可以按照以下步骤进行操作： 1. 首先，在父容器上设置透视效果。使用属性perspective来设置透视景深，数值一般为900px-1200px。例如，perspective: 1200px; [3] 2. 接下来，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值