当前位置：首页 > CSS

用css制作魔方

2026-04-01 22:23:24CSS

使用CSS制作3D魔方

通过CSS的3D变换和动画特性可以创建一个动态的魔方效果。以下是实现步骤：

HTML结构

用css制作魔方

<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: 100%;
  height: 100%;
  border: 2px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  font-weight: bold;
  opacity: 0.8;
}

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

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

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

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

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

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

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

制作多阶魔方

要创建3x3x3魔方，需要扩展HTML结构为27个小立方体：

用css制作魔方

<div class="rubik-cube">
  <!-- 第一层 -->
  <div class="layer">
    <!-- 第一行 -->
    <div class="row">
      <div class="cubie front-top-left"></div>
      <div class="cubie front-top-center"></div>
      <div class="cubie front-top-right"></div>
    </div>
    <!-- 共9个div组成一层，三层共27个 -->
  </div>
</div>

CSS关键点

使用transform-style: preserve-3d保持3D空间
为每个小立方体设置正确的3D位置
通过translate3d精确控制每个面的位置
添加悬停或点击交互效果

添加交互控制

通过JavaScript可以添加鼠标控制旋转效果：

let cube = document.querySelector('.cube');
let isDragging = false;
let startX, startY;

cube.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX;
  startY = e.clientY;
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const diffX = e.clientX - startX;
  const diffY = e.clientY - startY;
  cube.style.transform = `rotateX(${-diffY}deg) rotateY(${diffX}deg)`;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});