3D相册

2021-01-26 12:02:06 作者：互联网
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>3D</title>
    </head>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        .container {
            perspective: 1500px;
        }
        .images {
            width: 100px;
            height: 100px;
            margin: 350px auto;
            position: relative;
            transform: rotateX(-20deg);
            transform-style: preserve-3d;/*切换 3D 效果*/
        }
        .images img {
            position: absolute;
            box-shadow: 0 0 8px #eee;
        }
    </style>
    <body>
        <div class="container">
            <div id="wrap" class="images">
                <img src="3Dimg/thumb1.jpg">
                <img src="3Dimg/thumb2.jpg">
                <img src="3Dimg/thumb3.jpg">
                <img src="3Dimg/thumb4.jpg">
                <img src="3Dimg/thumb5.jpg">
                <img src="3Dimg/thumb6.jpg">
                <img src="3Dimg/thumb7.jpg">
                <img src="3Dimg/thumb8.jpg">
                <img src="3Dimg/thumb9.jpg">
                <img src="3Dimg/thumb10.jpg">
            </div>
        </div>
　　　　
    </body>
    <script type="text/javascript">
        window.onload = function() {
            var wrap = document.getElementById("wrap");
            var images = document.getElementsByTagName("img");
            var length = images.length;
            var deg = 360 / length;
            for (var i = 0; i < length; i++) {
                images[i].style.transform = "rotateY(" + deg * i + "deg) translateZ(240px)";
                images[length - i - 1].style.transition = "1s " + 0.2 * i + "s";
            }
            // 点击坐标
            var clickX, clickY;
            // 移动坐标
            var moveX, moveY;
            // 移动距离坐标
            var minusX, minusY;
            // 旋转角度
            var rotateX = 0,
                rotateY = -20;
            var timer = null;
            // 鼠标按下事件
            document.onmousedown = function(e) {
                clickX = e.clientX;
                clickY = e.clientY;
                // 鼠标移动
                this.onmousemove = function(e) {
                    moveX = e.clientX;
                    moveY = e.clientY;
                    // 移动距离
                    minusX = moveX - clickX;
                    minusY = moveY - clickY;
                    // 旋转角度，避免旋转太快故* 0.1
                    rotateX += minusX * 0.1;
                    rotateY -= minusY * 0.1;
                    // 中心轴旋转
                    wrap.style.transform = "rotateX(" + rotateY + "deg) rotateY(" + rotateX + "deg)"
                    clickX = moveX;
                    clickY = moveY;
                }
                // 鼠标释放
                this.onmouseup = function() {
                    this.onmousemove = null;
                    // 旋转惯性
                    timer = setInterval(function() {
                        minusX *= 0.99;
                        minusY *= 0.98;
                        // 旋转角度
                        rotateX += minusX * 0.2;
                        rotateY -= minusY * 0.1;
                        // 中心轴旋转
                        wrap.style.transform = 'rotateX(' + rotateY + 'deg) rotateY(' + rotateX + 'deg) ';
                        if (Math.abs(minusX) < 0.1 && Math.abs(minusY) < 0.1) {
                            clearInterval(timer);
                        }
                    }, 10);
                }
            }
        }
    </script>
</html>
标签：相册,images,rotateX,rotateY,minusX,var,3D,deg
来源： https://www.cnblogs.com/wencaiguagua/p/14329577.html