图片轮播实现旋转木马的效果

效果图：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery.js"></script>
</head>
<style>
    html, body {
        margin: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #000;
        /* 径向渐变 - 颜色结点均匀分布 */
        background-image: radial-gradient(circle at center center,rgba(252, 22, 242,0.2),rgba(0,0,0));
        perspective: 1000px;
    }
    .box {
        position: relative;
        width: 120px;
        height: 160px;
        margin: 300px auto;
        /* preserve-3d：所有子元素在3D空间中呈现 */
        transform-style: preserve-3d;
    }
    .box img {
        width: 100%;
        height: 100%;
        position: absolute;
        /* 生成倒影效果 */
        -webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%);
        /* transition: all 1s linear; */
    }
    /* .box .img1 {
        transform: rotateY(30deg) translateZ(300px);
        transition: transform 0.5s linear 0.1s;
    } */
</style>
<body>
    <div class="box">
        <img class="img1" src="./img/1.jpg" alt="">
        <img src="./img/2.jpg" alt="">
        <img src="./img/3.jpg" alt="">
        <img src="./img/4.jpg" alt="">
        <img src="./img/5.jpg" alt="">
        <img src="./img/6.jpg" alt="">
        <img src="./img/7.jpg" alt="">
        <img src="./img/8.jpg" alt="">
        <img src="./img/1.jpg" alt="">
        <img src="./img/2.jpg" alt="">
        <img src="./img/3.jpg" alt="">
        <img src="./img/4.jpg" alt="">
    </div>
</body>
</html>
<script>
    // 初始化实现发牌效果
    window.onload = function () {
        var img = $('img');
        var length = img.length;
        var deg = 360 / length;
        for (var i = 0; i < length; i++) {
            $('img').eq(i).css({
                'transform': 'rotateY(' + i * deg + 'deg) translateZ(300px)',
                'transition': 'transform 0.5s linear ' + (length - 1 - i) * 0.1 + 's',
            })
        };
        bindRotateEvent();
    }
    // 绑定旋转效果事件
    function bindRotateEvent() {
        var body = $('body');
        var rotateX = 0, rotateY = 0;
        var startX, startY, nowX, nowY, changeX, changeY;
        var timer; // 缓冲效果定时器
        body.on('mousedown', function(e) {
            clearInterval(timer);
            startX = e.clientX;
            startY = e.clientY;
            // 鼠标按下后才绑定mousemove事件(鼠标移动)
            body.on('mousemove', function(e) {
                nowX = e.clientX;
                nowY = e.clientY;
                // 移动幅度
                changeX = nowX - startX;
                changeY = nowY - startY;
                // console.log(`左右移动了${changeX}，上下移动了${changeY}`);
                // 核心：计算rotateX、rotateY，按着比例转动起来
                rotateX -= changeY * 0.3; // rotateX: 沿着X轴的3D旋转，即用上下移动的幅度changeY来计算
                rotateY += changeX * 0.3; // rotateY: 沿着Y轴的3D旋转，即用左右移动的幅度changeX来计算

                setBoxTarnsformRotate(rotateX, rotateY); // 设置box的transform属性

                startX = nowX;
                startY = nowY;
            })
        }).on('mouseup', function(e) {
            body.off('mousemove'); // 鼠标松开取消绑定mousemove事件
            // 添加缓冲效果
            timer = setInterval(function() {
                // 缓冲：改变越变越小
                changeX = changeX * 0.95;
                changeY = changeY * 0.95;

                rotateX -= changeY * 0.5;
                rotateY += changeX * 0.5;
                
                setBoxTarnsformRotate(rotateX, rotateY); // 设置box的transform属性

                // 小到一定程度清除计时器
                if (Math.abs(changeX) < 0.1 && Math.abs(changeY) < 0.1) {
                    clearInterval(timer);
                }
            }, 10);
        })
    }

    function setBoxTarnsformRotate(rotateX, rotateY) {
        // 旋转改变box的transform属性
        var box = $('.box');

        // 旋转一圈之后重新开始计算
        rotateX = rotateX % 360;
        rotateY = rotateY % 360;
        // console.log(`rotateX：${rotateX}，rotateY：${rotateY}`);

        // 设置box的transform属性
        box.css('transform', 'rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)');
    }
</script>