使用 CSS3 制作可自由旋转的立方体的方法

一、HTML 结构

首先创建一个简单的 HTML 结构，包含一个容器元素用于容纳立方体：

<div class="cube-container">
  <div class="cube">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face left"></div>
    <div class="face right"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
  </div>
</div>

二、CSS 样式

1. 设置容器和立方体的基本样式：

.cube-container {
  perspective: 800px; /* 设置透视效果 */
  perspective-origin: 50% 50%;
  width: 200px;
  height: 200px;
  margin: 100px auto;
  position: relative;
}

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d; /* 保留 3D 转换效果 */
  transition: transform 2s ease; /* 添加过渡效果 */
}

2. 设置立方体各个面的样式：

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.8;
}

.front {
  background-color: skyblue;
  transform: translateZ(100px);
}

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

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

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

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

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

三、添加交互效果

可以使用 JavaScript 为立方体添加交互效果，例如当鼠标移动或点击时旋转立方体。以下是一个使用鼠标移动事件的示例：

const cube = document.querySelector('.cube');
document.addEventListener('mousemove', (e) => {
  const x = ((e.clientX / window.innerWidth) * 360) - 180;
  const y = ((e.clientY / window.innerHeight) * 360) - 180;
  cube.style.transform = `rotateX(${y}deg) rotateY(${x}deg)`;
});

这段代码监听鼠标移动事件，根据鼠标在屏幕上的位置计算出旋转角度，并应用到立方体上，使其随着鼠标移动而旋转。