CSS3之3D魔方鼠标控制酷炫效果

2023-12-28 07:46:13

CSS3为我们带来了许多令人惊叹的特性，包括3D变换功能。本文将向你展示如何使用CSS3和JavaScript创建炫酷的3D魔方，并使用鼠标控制其旋转。

鼠标事件

这次的效果，咱们需要用JavaScript实现。主要是监听鼠标事件，计算鼠标移动距离，改变魔方旋转角度。

监听鼠标事件

首先，我们需要监听鼠标事件。可以使用以下代码监听鼠标按下和释放事件：

document.addEventListener('mousedown', mouseDownHandler);
document.addEventListener('mouseup', mouseUpHandler);

其中，mouseDownHandler和mouseUpHandler是自定义的函数，用于处理鼠标按下和释放事件。

计算鼠标移动距离

接下来，我们需要计算鼠标移动距离。可以使用以下代码计算鼠标移动距离：

function getMouseDelta(event) {
  return {
    x: event.clientX - mouseStartPos.x,
    y: event.clientY - mouseStartPos.y
  };
}

其中，mouseStartPos是鼠标按下时的位置，event是鼠标移动事件。

改变魔方旋转角度

现在，我们可以根据鼠标移动距离改变魔方旋转角度。可以使用以下代码改变魔方旋转角度：

function rotateCube(delta) {
  cube.style.transform = `rotateX(${delta.y}deg) rotateY(${delta.x}deg)`;
}

其中，cube是魔方元素，delta是鼠标移动距离。

完整代码

完整的代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    #cube {
      width: 100px;
      height: 100px;
      background: #000;
      transform-style: preserve-3d;
    }

    #cube-front {
      transform: translateZ(50px);
    }

    #cube-back {
      transform: rotateY(180deg) translateZ(50px);
    }

    #cube-left {
      transform: rotateY(-90deg) translateZ(50px);
    }

    #cube-right {
      transform: rotateY(90deg) translateZ(50px);
    }

    #cube-top {
      transform: rotateX(90deg) translateZ(50px);
    }

    #cube-bottom {
      transform: rotateX(-90deg) translateZ(50px);
    }
  </style>
</head>
<body>
  <div id="cube">
    <div id="cube-front"></div>
    <div id="cube-back"></div>
    <div id="cube-left"></div>
    <div id="cube-right"></div>
    <div id="cube-top"></div>
    <div id="cube-bottom"></div>
  </div>

  <script>
    const cube = document.getElementById('cube');
    const mouseStartPos = { x: 0, y: 0 };

    document.addEventListener('mousedown', mouseDownHandler);
    document.addEventListener('mouseup', mouseUpHandler);

    function mouseDownHandler(event) {
      mouseStartPos.x = event.clientX;
      mouseStartPos.y = event.clientY;
    }

    function mouseUpHandler(event) {
      const delta = getMouseDelta(event);
      rotateCube(delta);
    }

    function getMouseDelta(event) {
      return {
        x: event.clientX - mouseStartPos.x,
        y: event.clientY - mouseStartPos.y
      };
    }

    function rotateCube(delta) {
      cube.style.transform = `rotateX(${delta.y}deg) rotateY(${delta.x}deg)`;
    }
  </script>
</body>
</html>