gsap-3D

 // 创建一个时间轴实例
        const tl = gsap.timeline();
        
        // 360度旋转动画
        function rotateAnimation() {
            gsap.to(".cube", {
                duration: 4,          // 动画持续时间4秒
                rotationY: 360,      // Y轴旋转360度
                rotationX: 360,      // X轴旋转360度
                ease: "power1.inOut", // 缓动效果：渐入渐出
                repeat: -1           // 无限重复
            });
        }

        // 翻转动画
        function flipAnimation() {
            gsap.to(".cube", {
                duration: 2,          // 动画持续时间2秒
                rotationY: 180,      // Y轴旋转180度
                scale: 1.2,          // 放大到1.2倍
                ease: "back.inOut(1.7)", // 缓动效果：带回弹的渐入渐出，1.7是回弹强度
                yoyo: true,          // 动画往返播放
                repeat: -1           // 无限重复
            });
        }

        // 展开动画
        function explodeAnimation() {
            // 重置位置
            gsap.set(".cube", { 
                rotationX: 0,        // X轴旋转重置为0度
                rotationY: 0         // Y轴旋转重置为0度
            });
            
            // 创建新的时间轴
            const tl = gsap.timeline({
                repeat: -1,          // 无限重复
                repeatDelay: 1       // 每次重复之间延迟1秒
            });
            
            tl.to(".front", { 
                z: 300,              // Z轴移动300像素（向前）
                duration: 1          // 动画持续时间1秒
            })
            .to(".back", { 
                z: -300,             // Z轴移动-300像素（向后）
                duration: 1          // 动画持续时间1秒
            }, "<")  // 与前一个动画同时开始
            .to(".right", { 
                x: 300,              // X轴移动300像素（向右）
                duration: 1          // 动画持续时间1秒
            }, "<")  // 与前一个动画同时开始
            .to(".left", { 
                x: -300,             // X轴移动-300像素（向左）
                duration: 1          // 动画持续时间1秒
            }, "<")  // 与前一个动画同时开始
            .to(".top", { 
                y: -300,             // Y轴移动-300像素（向上）
                duration: 1          // 动画持续时间1秒
            }, "<")  // 与前一个动画同时开始
            .to(".bottom", { 
                y: 300,              // Y轴移动300像素（向下）
                duration: 1          // 动画持续时间1秒
            }, "<")  // 与前一个动画同时开始
            // 收回动画
            .to(".face", { 
                x: 0,                // X轴回到原始位置
                y: 0,                // Y轴回到原始位置
                z: 0,                // Z轴回到原始位置
                duration: 1,         // 动画持续时间1秒
                ease: "back.inOut(1.7)" // 缓动效果：带回弹的渐入渐出，1.7是回弹强度
            });
        }

        // 默认播放旋转动画
        rotateAnimation();