当前位置：首页 > CSS

css魔方制作

2026-02-27 07:58:04CSS

CSS 魔方制作方法

基础结构搭建

使用HTML创建魔方的容器和面，每个面包含9个小方块，对应魔方的6个面。通过div嵌套实现层级关系，外层为魔方容器，中层为面，内层为小方块。

<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>

3D空间设置

通过CSS的transform-style和perspective属性创建3D空间。父容器设置transform-style: preserve-3d保持子元素3D效果，perspective控制观察视角的景深。

body {
  perspective: 1000px;
}
.cube {
  transform-style: preserve-3d;
  width: 200px;
  height: 200px;
  position: relative;
}

面定位与旋转

使用transform的rotate和translateZ属性将6个面定位到立方体的不同位置。每个面需要旋转特定角度并沿Z轴移动魔方边长的一半（如100px）。

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}
.front {
  transform: translateZ(100px);
}
.back {
  transform: rotateY(180deg) translateZ(100px);
}
.right {
  transform: rotateY(90deg) translateZ(100px);
}
.left {
  transform: rotateY(-90deg) translateZ(100px);
}
.top {
  transform: rotateX(90deg) translateZ(100px);
}
.bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

小方块细节处理

每个面用9个彩色小方块拼接，通过CSS Grid布局实现3x3网格。为不同面的小方块设置不同颜色（如红、蓝、绿等），模拟真实魔方外观。

.face {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
}
.front .cubie { background: red; }
.back .cubie { background: orange; }
.right .cubie { background: blue; }
.left .cubie { background: green; }
.top .cubie { background: white; }
.bottom .cubie { background: yellow; }

动画交互

添加@keyframes实现自动旋转或通过hover触发旋转效果。使用transform: rotateX/Y()控制旋转轴和角度，transition平滑动画过渡。

.cube {
  animation: spin 10s infinite linear;
}
@keyframes spin {
  from { transform: rotateX(0) rotateY(0); }
  to { transform: rotateX(360deg) rotateY(360deg); }
}

响应式调整

通过媒体查询或JavaScript动态调整魔方尺寸和视角，确保在不同设备上正常显示。计算窗口大小比例，动态修改perspective和魔方容器的尺寸。

window.addEventListener('resize', () => {
  const size = Math.min(window.innerWidth, window.innerHeight) * 0.5;
  document.querySelector('.cube').style.width = `${size}px`;
});

css魔方制作