JavaScript实现的3D旋转魔方动画效果实例代码

下面是详细的攻略：

介绍

这是一个使用 JavaScript 实现的 3D 旋转魔方动画效果的实例代码。该代码使用了 CSS3 的 transform 属性来实现魔方的旋转效果，同时也使用了 JS 来控制魔方的旋转方向、速度等参数。

运行代码

如果需要运行本代码，请将以下所有代码保存为一个 HTML 文件，并使用浏览器打开该文件。此外，请确保您的浏览器支持 CSS3 的 transform 属性。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript实现的3D旋转魔方动画效果</title>
    <style>
        .cube {
            position: relative;
            width: 120px;
            height: 120px;
            transform-style: preserve-3d;
            transform-origin: 50% 50%;
            animation: rotate 6s linear infinite;
        }

        .cube .side {
            position: absolute;
            width: 100px;
            height: 100px;
            border: 10px solid #fff;
        }

        .cube .side-front {
            transform: translateZ(60px);
        }

        .cube .side-back {
            transform: rotateY(180deg) translateZ(60px);
        }

        .cube .side-left {
            transform: rotateY(-90deg) translateZ(60px);
        }

        .cube .side-right {
            transform: rotateY(90deg) translateZ(60px);
        }

        .cube .side-top {
            transform: rotateX(90deg) translateZ(60px);
        }

        .cube .side-bottom {
            transform: rotateX(-90deg) translateZ(60px);
        }

        @keyframes rotate {
            0% {
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            100% {
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="side side-front"></div>
        <div class="side side-back"></div>
        <div class="side side-left"></div>
        <div class="side side-right"></div>
        <div class="side side-top"></div>
        <div class="side side-bottom"></div>
    </div>

    <script>
        var cube = document.querySelector('.cube');
        var angleX = 0;
        var angleY = 0;
        var dragging = false;
        var lastX;
        var lastY;

        document.addEventListener('mousedown', function(event) {
            dragging = true;
            lastX = event.clientX;
            lastY = event.clientY;
        });

        document.addEventListener('mousemove', function(event) {
            if (dragging) {
                angleX = (angleX + event.clientY - lastY) % 360;
                angleY = (angleY + event.clientX - lastX) % 360;
                cube.style.transform = 'rotateX(' + angleX + 'deg) rotateY(' + angleY + 'deg)';
                lastX = event.clientX;
                lastY = event.clientY;
            }
        });

        document.addEventListener('mouseup', function(event) {
            dragging = false;
        });
    </script>
</body>
</html>

代码解析

以下是代码的解析说明。

CSS 部分

首先我们来看 CSS 部分的代码：

.cube {
    position: relative;
    width: 120px;
    height: 120px;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    animation: rotate 6s linear infinite;
}

.cube .side {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 10px solid #fff;
}

.cube .side-front {
    transform: translateZ(60px);
}

.cube .side-back {
    transform: rotateY(180deg) translateZ(60px);
}

.cube .side-left {
    transform: rotateY(-90deg) translateZ(60px);
}

.cube .side-right {
    transform: rotateY(90deg) translateZ(60px);
}

.cube .side-top {
    transform: rotateX(90deg) translateZ(60px);
}

.cube .side-bottom {
    transform: rotateX(-90deg) translateZ(60px);
}

@keyframes rotate {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

上面的代码定义了一个名为 cube 的容器元素，该元素的宽度和高度分别为 120px，使用了 CSS3 的 transform 属性来实现 3D 旋转效果，并使用了动画效果让其自动旋转。

接下来，我们定义了六个小的子元素，分别代表魔方的六个面，每个面都是一个大小为 100px 的正方形。这些子元素的样式类名为 side，并且每个子元素都使用了 transform 属性来将其放置在适当的位置。

最后，我们定义了一个名为 rotate 的动画序列，该序列会让 cube 元素从初始位置开始自动旋转，360 度一周。

JS 部分

JS 部分使用了原生的 JS 代码来实现对魔方的控制：

var cube = document.querySelector('.cube');
var angleX = 0;
var angleY = 0;
var dragging = false;
var lastX;
var lastY;

document.addEventListener('mousedown', function(event) {
    dragging = true;
    lastX = event.clientX;
    lastY = event.clientY;
});

document.addEventListener('mousemove', function(event) {
    if (dragging) {
        angleX = (angleX + event.clientY - lastY) % 360;
        angleY = (angleY + event.clientX - lastX) % 360;
        cube.style.transform = 'rotateX(' + angleX + 'deg) rotateY(' + angleY + 'deg)';
        lastX = event.clientX;
        lastY = event.clientY;
    }
});

document.addEventListener('mouseup', function(event) {
    dragging = false;
});

上面的代码使用了一些基本的 JS 事件响应机制，通过监听鼠标的按下、移动和抬起事件，实现了通过拖拽鼠标来控制魔方旋转的效果。

在 mousedown 事件中，我们记录下了鼠标最后一次的位置，然后将 dragging 标志设为 true，表示当前鼠标正在拖拽状态。

在 mousemove 事件中，如果 dragging 标志为 true，则计算出当前鼠标位置与上次位置之间的差值，然后将其累加到旋转角度上，并将旋转角度应用到 cube 元素的 transform 属性上。

在 mouseup 事件中，我们将 dragging 标志设为 false，表示当前鼠标不在拖拽状态。