3D旋转照片墙

创作时间:

作者:

@小白创作中心

3D旋转照片墙

引用

CSDN

https://blog.csdn.net/interest_ing_/article/details/137107173

在本文中，我们将学习如何使用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>