前端使用JavaScript结合CSS实现3D旋转跟随鼠标变化

前端使用JavaScript结合CSS实现3D旋转跟随鼠标变化的完整攻略如下：

准备工作

在开始实现前，需要确保以下工作已经完成：

1. HTML 结构
2. CSS 样式
3. JavaScript 代码

实现 3D 旋转

CSS 3D 变换是实现 3D 效果的核心。例如，使用下面的 CSS 代码可以创建一个旋转立方体的效果：

#cube {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: rotateX(45deg) rotateY(45deg);
}

#cube .side {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.9;
    color: white;
    font-size: 2em;
    text-align: center;
    line-height: 200px;
    font-weight: bold;
    cursor: pointer;
}

#cube .front {
    transform: translateZ(100px);
    background-color: red;
}

#cube .back {
    transform: rotateY(180deg) translateZ(100px);
    background-color: blue;
}

#cube .top {
    transform: rotateX(90deg) translateZ(100px);
    background-color: green;
}

#cube .bottom {
    transform: rotateX(-90deg) translateZ(100px);
    background-color: yellow;
}

#cube .left {
    transform: rotateY(-90deg) translateZ(100px);
    background-color: brown;
}

#cube .right {
    transform: rotateY(90deg) translateZ(100px);
    background-color: orange;
}

这里的 #cube 元素是立方体的容器，而 .side 类则是立方体的面。每个面可以根据需要设置不同的样式属性，例如背景颜色、文本颜色、字型大小等等。

可以通过在 #cube 元素上设置 transform: rotateX(45deg) rotateY(45deg); 属性来旋转立方体。其中，rotateX(45deg) 和 rotateY(45deg) 分别表示绕 X 和 Y 轴旋转 45 度。

监听鼠标事件

可以通过监听鼠标事件来实现 3D 旋转跟随鼠标变化的效果。下面是一个示例代码：

let xAngle = 0;
let yAngle = 0;

document.addEventListener('mousemove', function(event) {
    let width = window.innerWidth;
    let height = window.innerHeight;
    let mouseX = event.pageX - width / 2;
    let mouseY = event.pageY - height / 2;
    xAngle = mouseY / height * 180;
    yAngle = mouseX / width * 180;
});

let cube = document.querySelector('#cube');

function render() {
    cube.style.transform = `rotateX(${xAngle}deg) rotateY(${yAngle}deg)`;
    requestAnimationFrame(render);
}

render();

这里的 document.addEventListener('mousemove', function(event) {...}) 监听了 mousemove 事件，并更新 xAngle 和 yAngle 变量来实现旋转效果跟随鼠标移动。其中，cube.style.transform =rotateX(${xAngle}deg) rotateY(${yAngle}deg); 将旋转效果应用到 #cube 元素上。

示例

下面是一个基于上述攻略实现的示例：

• CodePen 示例
• GitHub 示例

可以参考这些示例代码来进一步了解如何实现 3D 旋转跟随鼠标的效果。