css魔方的制作

CSS 魔方的制作方法

基本结构

使用 HTML 创建一个立方体的基本结构，通常包含一个外层容器和六个面（前、后、左、右、上、下）。每个面用一个 <div> 表示。

<div class="cube">
  <div class="face front">Front</div>
  <div class="face back">Back</div>
  <div class="face left">Left</div>
  <div class="face right">Right</div>
  <div class="face top">Top</div>
  <div class="face bottom">Bottom</div>
</div>

CSS 样式

通过 CSS 的 transform 属性对每个面进行旋转和定位，使其组合成一个立方体。

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

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  background: rgba(0, 0, 255, 0.5);
  border: 2px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

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

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

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

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

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

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

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

关键点

• transform-style: preserve-3d 确保子元素在 3D 空间中渲染。
• 每个面通过 translate 和 rotate 调整位置和方向。
• 使用 animation 实现自动旋转效果。

交互增强

添加鼠标悬停或点击事件，控制立方体的旋转或显示隐藏面。

.cube:hover {
  animation-play-state: paused;
}

通过调整 transform 的数值，可以改变立方体的大小、旋转角度或动画效果。