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

最终效果如下

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

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

 

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

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

@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)
  }
}