3D旋转相册

最新推荐文章于 2024-08-30 17:16:51 发布

四月ℳ.

最新推荐文章于 2024-08-30 17:16:51 发布

阅读量209

点赞数 2

文章标签： 3d javascript 前端

本文链接：https://blog.csdn.net/M2695595362/article/details/140358229

版权

一、效果图

二、代码部分

（1）HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D旋转相册</title>
    <link rel="stylesheet" href="common.css">
    <style>
        * { margin: 0; padding: 0; }
        body { overflow: hidden; background: #000000; }
        .perspectice { perspective: 800px; }
        .wrap {
            width: 133px;
            height: 200px;
            margin: 150px auto;
            border: none;
            transform-style: preserve-3d;
            transform: rotateX(-20deg) rotateY(0deg);
        }
        .wrap img {
            position: absolute;
            top: 0;
        }
    </style>
</head>
<body>
<div class="perspectice">
    <div class="wrap">
        <img src="images/1.jpeg" width="133px" height="200px">
        <img src="images/2.jpeg" width="133px" height="200px">
        <img src="images/3.jpeg" width="133px" height="200px">
        <img src="images/4.jpeg" width="133px" height="200px">
        <img src="images/5.jpeg" width="133px" height="200px">
        <img src="images/6.jpeg" width="133px" height="200px">
        <img src="images/7.jpeg" width="133px" height="200px">
        <img src="images/8.jpeg" width="133px" height="200px">
        <img src="images/9.jpeg" width="133px" height="200px">
        <img src="images/10.jpeg" width="133px" height="200px">
    </div>
</div>
<script>
    window.onload = function() {
        var oImg = document.getElementsByTagName("img");
        var Deg = 360 / oImg.length;

        Array.prototype.forEach.call(oImg, function(el, index) {
            el.style.transform = "rotateY(" + Deg * index + "deg) translateZ(350px)";
            el.style.transition = "transform 1s " + index * 0.1 + "s";
        });

        var rotation = 0;
        setInterval(function() {
            rotation += 1;
            document.querySelector('.wrap').style.transform = 'rotateX(-20deg) rotateY(' + rotation + 'deg)';
        }, 50);
    };
</script>
</body>
</html>

（2）CSS代码


*{margin: 0;padding: 0;}
body{overflow: hidden;background: #000000;}

.perspectice{
<!--景深 -->
    perspective: 800px;
}
.wrap{
    width: 133px;
    height: 200px;
    border: 1px solid cornflowerblue;
    margin: 150px auto;

    transform-style: preserve-3d;
    transform:rotateX(-20deg) rotateY(0deg);
}
.wrap img{
    position: absolute;
    top: 0;

}

（3）JavaScript代码

window.onload=function() {
    var oImg = document.getElementsByTagName("img");

    var Deg = 360 / oImg.length;

    Array.prototype.forEach.call(oImg, function (el, index) {
        el.style.transform = "rotateY(" + Deg * index + "deg) translateZ(350px)";
        el.style.zIndex = -index;
        el.style.transition = "transform 1s " + index * 0.1 + "s";

    });
}