巧用CSS实现鼠标跟随 3D 旋转效果，让交互更加生动！

1. 背景介绍

CSS（Cascading Style Sheets）层叠样式表是一种用来渲染HTML(Hyper Text Markup Language)和XML (eXtensible Markup Language)的标记语言的技术，在Web开发中扮演着非常重要的角色。CSS的灵活性和强大的功能为我们提供了实现各种各样的效果，今天就介绍一种巧妙运用CSS实现的交互效果。

2. 需求分析

我们需要实现一个鼠标跟随的3D旋转效果，让整个页面更加生动。通过鼠标的移动实时改变元素的位置和旋转角度，使得元素表现出一种360度的旋转效果，并且更加贴合用户的交互行为。此技术可以应用于多种场景，例如展示图片、产品展示等，因此其应用场景十分广泛。

3. 实现方法

3.1 基本原理

首先，我们要先明确一下实现该效果的基本原理：通过JS监听鼠标移动的事件，得到鼠标相对于浏览器窗口的坐标值，然后将该值转换为相应的元素位置和旋转角度，并将改变后的元素属性应用到CSS样式中，从而实现鼠标跟随3D旋转效果。

3.2 代码实现步骤

下面我们分步骤来实现该效果。

Step 1: 首先，我们需要创建一个HTML页面，其中包含一个元素用于实现鼠标跟随的3D旋转。

<div class="box">

  <img src="example.png" width="200" height="200" alt="example">
</div>

Step 2: 接下来，我们需要将该box元素设置为绝对定位，并固定在页面的中心位置。通过CSS样式来设置box元素的初始位置和旋转角度。

.box {

  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateY(0deg) rotateX(0deg);
}

Step 3: 接下来，我们需要利用JS来监听鼠标移动事件，并获取鼠标相对于浏览器窗口的坐标值，计算出box元素需要移动的位置和旋转角度。

var box = document.querySelector('.box');

var mouseX = 0,
    mouseY = 0;
    
document.addEventListener('mousemove', function(e) {
  mouseX = (e.clientX / window.innerWidth - 0.5) * 30;
  mouseY = (e.clientY / window.innerHeight - 0.5) * 30;
  updateBox();
});
function updateBox() {
  box.style.transform = 'translate(-50%, -50%) rotateY(' + mouseX + 'deg) rotateX(' + mouseY + 'deg)';
}

Step 4: 最后，我们需要在CSS中设置box元素的过渡效果，使其旋转平滑，增加交互体验。

.box {

  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateY(0deg) rotateX(0deg);
  transition: transform 0.5s ease-in-out;
}

以上就是实现鼠标跟随3D旋转效果的全部代码，下面是完整代码：

<div class="box">

  <img src="example.png" width="200" height="200" alt="example">
</div>

.box {

  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateY(0deg) rotateX(0deg);
  transition: transform 0.5s ease-in-out;
}

var box = document.querySelector('.box');

var mouseX = 0,
    mouseY = 0;
    
document.addEventListener('mousemove', function(e) {
  mouseX = (e.clientX / window.innerWidth - 0.5) * 30;
  mouseY = (e.clientY / window.innerHeight - 0.5) * 30;
  updateBox();
});
function updateBox() {
  box.style.transform = 'translate(-50%, -50%) rotateY(' + mouseX + 'deg) rotateX(' + mouseY + 'deg)';
}

4. 总结

本文介绍了通过JS监听鼠标移动事件，利用CSS实现鼠标跟随3D旋转效果的技术。实现该效果的主要思想是将鼠标移动事件转换为元素位置和旋转角度的转换，然后将其应用到CSS样式中，从而实现鼠标跟随的3D旋转效果。此技术可以应用于多种场景，为用户提供更加生动、直观的交互体验。