如何用CSS制作可以转动的魔方

成品效果如下

三阶魔方想要进行转动因为太过复杂，所以这里用的是2阶魔方。 首先要搭建一个魔方。利用6个div盒子不同的空间旋转，拼出一个小正方体。然后改变正方体的空间位置，一共8个小正方体拼成2阶魔方。最后给小正方体的每一个面上一个颜色。

下面的代码中，box为每个小正方体的公共样式，a1.a2.a3这些是用来给每个小立方体设立空间坐标，已经转动时不同的位置变化。

到这里我们的魔方就搭建好了。接下来的问题就是，怎么让魔方转动。因为每一个小正方体都是独立的个体，所以我们不能直接控制魔方的一层进行转动。也就是说魔方每转动一次，那一层的4个小正方体都有着自己独立的转动方式，我们需要给4个小正方体设置不同的动画代码，每一次转动就是4个小正方体同时进行空间的位移效果，利用动画打包装起来。最后通过所有动画的拼接，呈现出魔方打乱又自动复原的效果。

代码有点乱，看看就好，就是各种动画的拼接。 最后再对魔方的样式和背景图稍微装饰一下，加个圆角，上个色，就成了gif图里面的效果了。

css代码

body{
  width: 1520px;
  height: 600px;
  background: url(./背景图.jpg) no-repeat;
  background-size: 110%;
  /* background-image: linear-gradient(#29f9f0 0%, #000 80%); */
}
.box{
  position: relative;
  width: 100px;
  height: 100px;
  margin: 150px auto;
  
  /* perspective: 800px; */
  transition: all 200s;
  transform-style: preserve-3d;
  transform: rotateX(15deg) rotateY(-15deg);
  /* animation: move 2s 4s linear alternate; */
}
/* @keyframes move{
  0%{
      transform: rotateX(15deg) rotateY(-15deg)
  }
  50%{
      margin: 100PX 100PX 100PX 100PX;
  }
  100%{
      transform: rotateX(15deg) rotateY(-15deg)
  }
} */
.box:hover{
  transform: rotateX(10000deg) rotateY(-1000deg) 
  rotateZ(10000deg)
  scale3d(0,0,0);
}
/* .box img{
  display: block;
  width: 95%;
  height: 95%;
  margin: 0 auto;
  margin-top: 2.5px;
} */

.box div{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 20px;

}

.box div:nth-child(1){
  border: 3px solid black;
  background: rgba(225,0,0,0.9);
  transform: rotateX(90deg) translateZ(50px);
}
.box div:nth-child(2){
  border: 3px solid black;
  background: rgba(225, 210, 0,0.9);
  transform: translateZ(-50px);
}
.box div:nth-child(3){
  border: 3px solid black;
  background: rgba(56, 225, 0,0.9);
  transform: translateZ(50px);
}
.box div:nth-child(4){
  border: 3px solid black;
  background: rgba(255, 192, 203, 0.89);
  transform: rotateX(-90deg) translateZ(50px);
}
.box div:nth-child(5){
  border: 3px solid black;
  background: rgba(41, 0, 225,0.9);
  transform: rotateY(90deg) translateZ(50px);
}
.box div:nth-child(6){
  border: 3px solid black;
  background: rgba(225, 0, 180,0.9);
  transform: rotateY(-90deg) translateZ(50px);
}
.a1{
  transform: translateX(0px) translateY(-110px);
  animation: a11 1s 1S linear forwards,a12 1s 2s linear forwards,a13 1s 7s linear forwards,a14 1s 8s linear forwards,a15 2s 4s linear forwards
}
.a2{
  transform: translateX(110px) translateY(-100px);
  animation: a21 1s linear forwards,a22 1s 1s linear forwards,a23 1s 8s linear forwards,a24 1s 9s linear forwards,a25 2s 4s linear forwards
 
}
.a3{
  transform: translateX(110px) translateY(10px);
  animation: a31 1s linear forwards,a32 1s 1s linear forwards,a33 1s 2s linear forwards,a34 1s 3s linear forwards,a35 1s 6s linear forwards,a36 1s 7s linear forwards,a37 1s 8s linear forwards,a38 1s 9s linear forwards,a39 2s 4s linear forwards
}
.a4{
  transform: translateX(0px) translateY(10px);
  animation: a41 1s 2s linear forwards, a42 1s 3s linear forwards, a43 1s 6s linear forwards,a44 1s 7s linear forwards,a45 2s 4s linear forwards
}
.a5{
  transform: translateX(0px) translateY(10px)  translateZ(110px);
  animation: a51 1s 2s linear forwards,a52 1s 7s linear forwards,a53 2s 4s linear forwards
}
.a6{
  transform: translateX(110px) translateY(10px) translateZ(110px);
  animation: a61 1s linear forwards,a62 1s 3s linear forwards,a63 1s 6s linear forwards,a64 1s 9s linear forwards,a65 2s 4s linear forwards
}
.a7{
  transform: translateX(110px) translateY(-100px) translateZ(110px);
  animation: a71 1s linear forwards, a72 1s 3s linear forwards,a73 1s 6s linear forwards,a74 1s 9s linear forwards,a75 2s 4s linear forwards
}
.a8{
  transform: translateX(0px) translateY(-100px) translateZ(110px);
  animation: a81 1s 1S linear forwards,a82 1s 8S linear forwards,a83 2s 4s linear alternate;
}
.box .a1 div{
  overflow: hidden;
}
.box .a2 div{
  overflow: hidden;
}
.box .a3 div{
  overflow: hidden;
}
.box .a4 div{
  overflow: hidden;
}
.box .a5 div{
  overflow: hidden;
}
.box .a6 div{
  overflow: hidden;
}
.box .a7 div{
  overflow: hidden;
}
.box .a8 div{
  overflow: hidden;
}
@keyframes a41{
  100%{
      transform: translateX(0px)  translateZ(110px) translateY(10px) rotateX(90deg);
  }
}
@keyframes a42{
  100%{
      transform: translateX(0px)  translateZ(0px) translateY(10px) rotateX(90deg) rotateZ(90deg);
  }
}
@keyframes a43{
  100%{
      transform: translateX(0px)  translateZ(110px) translateY(10px) rotateX(90deg) rotateZ(0deg);
  }
}
@keyframes a44{
  100%{
      transform: translateX(0px)  translateZ(0px) translateY(10px) rotateX(0deg);
  }
}

@keyframes a51{
  100%{
      transform: translateX(0px)  translateZ(110px) translateY(-100px) rotateX(90deg);
  }
}
@keyframes a52{
  100%{
      transform: translateX(0px)  translateZ(110px) translateY(10px) rotateX(0deg);
  }
}
@keyframes a71{
  100%{
      transform: translateX(110px)  translateZ(110px) translateY(10px) rotateX(-90deg);
  }
}
@keyframes a72{
  100%{
      transform: translateX(0px)  translateZ(110px) translateY(10px) rotateX(-90deg) rotateZ(-90deg);
  }
}
@keyframes a73{
  100%{
      transform: translateX(110px)  translateZ(110px) translateY(10px) rotateX(-90deg);
  }
}
@keyframes a74{
  100%{
      transform: translateX(110px)  translateZ(110px) translateY(-100px) rotateX(0deg);
  }
}
@keyframes a61{
  100%{
      transform: translateX(110px)  translateZ(0px) translateY(10px) rotateX(-90deg);
  }
}
@keyframes a62{
  100%{
      transform: translateX(110px)  translateZ(110px) translateY(10px) rotateX(-90deg) rotateZ(-90deg);
  }
}
@keyframes a63{
  100%{
      transform: translateX(110px)  translateZ(0px) translateY(10px) rotateX(-90deg);
  }
}
@keyframes a64{
  100%{
      transform: translateX(110px)  translateZ(110px) translateY(10px) rotateX(0deg);
  }
}
@keyframes a21{
  100%{
      transform: translateX(110px)  translateZ(110px) translateY(-100px) rotateX(-90deg);
  }
}
@keyframes a22{
  100%{
      transform: translateX(110px)  translateZ(0px) translateY(-100px) rotateX(-90deg)  rotateY(0deg) rotateZ(90deg);
  }
}
@keyframes a23{
  100%{
      transform: translateX(110px)  translateZ(110px) translateY(-100px) rotateX(-90deg);
  }
}
@keyframes a24{
  100%{
      transform: translateX(110px)  translateZ(0px) translateY(-100px) rotateX(0deg);
  }
}
@keyframes a31{
  100%{
      transform: translateX(110px)  translateZ(0px) translateY(-100px) rotateX(-90deg);
  }
}
@keyframes a32{
  100%{
      transform: translateX(0px)  translateZ(0px) translateY(-100px) rotateX(-90deg)  rotateY(0deg) rotateZ(90deg);
  }
}
@keyframes a33{
  100%{
      transform: translateX(0px)  translateZ(0px) translateY(10px) rotateY(90deg) rotateX(-90deg) rotateY(-90deg);
  }
}
@keyframes a34{
  100%{
      transform: translateX(110px)  translateZ(0px) translateY(10px) rotateY(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg);
  }
}
@keyframes a35{
  100%{
      transform: translateX(0px)  translateZ(0px) translateY(10px) rotateY(90deg) rotateX(-90deg) rotateY(-90deg);
  }
}
@keyframes a36{
  100%{
      transform: translateX(0px)  translateZ(0px) translateY(-100px) rotateY(90deg) rotateX(-90deg);
  }
}
@keyframes a37{
  100%{
      transform: translateX(110px)  translateZ(0px) translateY(-100px) rotateX(-90deg);
  }
}
@keyframes a38{
  100%{
      transform: translateX(110px)  translateZ(0px) translateY(10px) rotateX(0deg);
  }
}
@keyframes a81{
  100%{
      transform: translateX(110px)  translateZ(110px) translateY(-100px) rotateY(90deg);
  }
}
@keyframes a82{
  100%{
      transform: translateX(0px)  translateZ(110px) translateY(-100px) rotateY(0deg);
  }
}
@keyframes a11{
  100%{
      transform: translateX(0px)  translateZ(110px) translateY(-100px) rotateY(90deg);
  }
}
@keyframes a12{
  100%{
      transform: translateX(0px)  translateZ(0px) translateY(-100px) rotateY(90deg) rotateZ(90deg);
  }
}
@keyframes a13{
  100%{
      transform: translateX(0px)  translateZ(110px) translateY(-100px) rotateY(90deg);
  }
}
@keyframes a14{
  100%{
      transform: translateX(0px)  translateZ(0px) translateY(-100px) rotateY(0deg);
  }
}
@keyframes a83{
  50%{
      transform: translate3d(200px,-200px,200px)
  }
}
@keyframes a53{
  50%{
      transform: translate3d(-200px,-200px,200px)
  }
}
@keyframes a75{
  50%{
      transform: translate3d(-200px,200px,200px)
  }
}
@keyframes a65{
  50%{
      transform: translate3d(200px,200px,200px)
  }
}
@keyframes a15{
  50%{
      transform: translate3d(-200px,-200px,-200px)
  }
}
@keyframes a25{
  50%{
      transform: translate3d(200px,-200px,-200px)
  }
}
@keyframes a39{
  50%{
      transform: translate3d(200px,200px,-200px)
  }
}
@keyframes a45{
  50%{
      transform: translate3d(-200px,200px,-200px)
  }
}
复制代码

html代码

 <div class="box">
        <div style="opacity: 0;">1</div>
        <div style="opacity: 0;">1</div>
        <div style="opacity: 0;">1</div>
        <div style="opacity: 0;">1</div>
        <div style="opacity: 0;">1</div>
        <div style="opacity: 0;">1</div>
    <div class="box a1">
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
    </div>
    <div class="box a2">
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
    </div>
    <div class="box a3">
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
    </div>
    <div class="box a4">
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
    </div>
    <div class="box a5">
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
    </div>
    <div class="box a6">
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
    </div>
    <div class="box a7">
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
    </div>
    <div class="box a8">
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
    </div>
</body>
复制代码