css魔方制作

2026-04-01 07:35:35CSS

使用CSS制作3D魔方

通过CSS的transform属性和3D变换功能可以实现一个交互式魔方效果。以下是一个完整的实现方案：

css魔方制作

HTML结构

<div class="cube">
  <div class="face front">1</div>
  <div class="face back">2</div>
  <div class="face right">3</div>
  <div class="face left">4</div>
  <div class="face top">5</div>
  <div class="face bottom">6</div>
</div>

CSS样式

body {
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f0f0f0;
}

.cube {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  animation: rotate 10s infinite linear;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
  border: 2px solid black;
}

.front {
  background: red;
  transform: translateZ(100px);
}

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

.right {
  background: blue;
  transform: translateX(100px) rotateY(90deg);
}

.left {
  background: green;
  transform: translateX(-100px) rotateY(-90deg);
}

.top {
  background: yellow;
  transform: translateY(-100px) rotateX(90deg);
}

.bottom {
  background: purple;
  transform: translateY(100px) rotateX(-90deg);
}

@keyframes rotate {
  from { transform: rotateX(0) rotateY(0); }
  to { transform: rotateX(360deg) rotateY(360deg); }
}

进阶实现方案

对于更真实的魔方效果，可以将每个面拆分为9个小方块：

css魔方制作

<div class="cube">
  <div class="face front">
    <div class="square"></div>
    <!-- 重复8个square -->
  </div>
  <!-- 其他五个面 -->
</div>

添加交互控制：

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