CSS3 - 3D 动画小案例 - 魔方

前言 ：

今天给大家分享一个小案例(魔方)

下面是一个关于使用 CSS3 创建魔方的案例说明。这个案例展示了如何使用 CSS3 的 3D 变换和动画功能来实现一个交互式的魔方效果

废话不多说直接分享代码

html结构：

<div class="container">
  <div class="cube">
    <!-- 前面 -->
    <div class="face front">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <!-- 后面 -->
    <div class="face back">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <!-- 右面 -->
    <div class="face right">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <!-- 左面 -->
    <div class="face left">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <!-- 上面 -->
    <div class="face top">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <!-- 下面 -->
    <div class="face bottom">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
</div>

css样式

/* 容器设置 */
.container {
  width: 200px;
  height: 200px;
  position: absolute;
  perspective: 700px;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
  box-sizing: border-box;
}

/* 魔方设置 */
.cube {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  transform-style: preserve-3d;
  background: black;
  animation: rotatetest 20s linear infinite;
}

/* 面的通用样式 */
.face {
  width: 100%;
  height: 100%;
  font-size: 0;
  position: absolute;
  backface-visibility: hidden;
  background: black;
  border-radius: 7px;
  box-sizing: border-box;
}

/* 小方块的样式 */
.face .item {
  display: inline-block;
  border: 6px solid;
  width: 33%;
  height: 33%;
  border-radius: 12px;
  box-sizing: border-box;
}

/* 各个面的位置设置 */
.face.front {
  transform: translateZ(100px);
}
.face.front .item {
  background: #b71234;
}

.face.back {
  transform: rotateX(-180deg) translateZ(100px);
}
.face.back .item {
  background: #cecece;
}

.face.right {
  transform: rotateY(90deg) translateZ(100px);
}
.face.right .item {
  background: #0046ad;
}

.face.left {
  transform: rotateY(-90deg) translateZ(100px);
}
.face.left .item {
  background: #ffd500;
}

.face.top {
  transform: rotateX(90deg) translateZ(100px);
}
.face.top .item {
  background: #ff5800;
}

.face.bottom {
  transform: rotateX(-90deg) translateZ(100px);
}
.face.bottom .item {
  background: #009b48;
}

/* 动画设置 */
@keyframes rotatetest {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateX(30deg) rotateY(90deg);
  }
  50% {
    transform: rotateX(60deg) rotateY(180deg);
  }
  75% {
    transform: rotateX(120deg) rotateY(270deg);
  }
  100% {
    transform: rotateX(180deg) rotateY(360deg);
  }
}

代码解释

HTML 结构：

• 每个面（front, back, right, left, top, bottom）都包含9个小方块（.item），这些小方块构成了魔方的各个面

• CSS 样式：

• .container 设置了容器的大小和位置，并启用了3D透视效果。
• .cube 设置了魔方的基本样式，包括3D变换风格和动画。
• .face 设置了每个面的基本样式，包括位置和背面隐藏。
• 每个面的具体样式（如颜色）通过嵌套选择器来定义。
• @keyframes rotatetest 定义了魔方的旋转动画，使魔方在页面加载后自动旋转

     这个案例展示了如何使用纯 CSS3 创建一个自动旋转的 3D 魔方

   看不如动手做 第一遍复制代码测试一下，第二遍懂了之后自己动手试试吧

                                                                                                                           作者亲测试 

 温馨小留言: 喜欢作者的点赞加关注吧?