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

前端
字数统计: 1.4k   |   阅读时长≈ 7 分钟

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结构。

1
2
3
4
5
6
7
<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旋转。

1
2
3
4
5
6
7
8
9
10
.perspective {
  perspective: 800px;
}

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

3. 使用JavaScript进行动画

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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旋转的效果。

全部代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!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动画效果。通过学习和实践，你可以更深入地理解这些技术，并将其应用到你的项目中。

打赏
  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！
  • Copyrights © 2022-2024 何福海
  • 访问人数: | 浏览次数:

请我喝杯奶茶吧~

支付宝
微信