当前位置：首页 > CSS

css魔方制作

2026-01-28 04:56:03CSS

CSS 魔方制作方法

使用 CSS 和 HTML 可以创建一个 3D 魔方效果，主要通过 transform 和 perspective 属性实现立体旋转效果。

基础 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 样式设置

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

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

.front { background: red; transform: translateZ(100px); }
.back { background: green; transform: translateZ(-100px); }
.right { background: blue; transform: rotateY(90deg) translateZ(100px); }
.left { background: orange; transform: rotateY(-90deg) translateZ(100px); }
.top { background: white; transform: rotateX(90deg) translateZ(100px); }
.bottom { background: yellow; transform: rotateX(-90deg) translateZ(100px); }

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

实现交互效果

添加鼠标悬停暂停动画的效果：

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

响应式调整

为不同屏幕尺寸调整魔方大小：

css魔方制作

@media (max-width: 600px) {
  .cube {
    width: 100px;
    height: 100px;
  }
  .face {
    width: 100px;
    height: 100px;
    font-size: 1em;
  }
  .front, .back, .right, .left, .top, .bottom {
    transform: translateZ(50px);
  }
}

通过以上代码可实现一个基本的 3D CSS 魔方效果，支持旋转动画和响应式布局。