[分享]css做***正方体

CSS可以实现很多酷炫的效果，其中包括让一个正方体***的效果。

/* ***正方体需要用到animation，定义一个动画 */
@keyframes explode {
  0% {
    transform: translateY(0) rotateX(0) rotateY(0);
    opacity: 1;
  }
  /* *** */
  33% {
    transform: translateY(-200px) rotateX(720deg) rotateY(720deg);
    opacity: 0.6;
  }
  /* 反弹 */
  66% {
    transform: translateY(100px) rotateX(180deg) rotateY(360deg);
    opacity: 0.3;
  }
  100% {
    transform: translateY(0) rotateX(0) rotateY(0);
    opacity: 1;
  }
}

/* 定义一个立方体，使用perspective让它产生立体感 */
.container {
  perspective: 500px;
  width: 200px;
}

/* 使用transform让立方体旋转 */
.cube {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  animation: explode 2s ease-in-out infinite;
}

/* 定义六个面 */
.cube .front,
.cube .back,
.cube .right,
.cube .left,
.cube .top,
.cube .bottom {
  position: absolute;
  width: 200px;
  height: 200px;
}

/* 添加颜色 */
.cube .front {
  transform: translateZ(100px);
  background: red;
}

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

.cube .right {
  transform: rotateY(90deg) translateZ(100px);
  background: yellow;
}

.cube .left {
  transform: rotateY(-90deg) translateZ(100px);
  background: green;
}

.cube .top {
  transform: rotateX(90deg) translateZ(100px);
  background: purple;
}

.cube .bottom {
  transform: rotateX(-90deg) translateZ(100px);
  background: cyan;
} 

以上就是实现***正方体的核心代码。通过定义动画和对立方体的六个面进行定位和旋转，就可以得到一个能够***的正方体效果。