魔方这个学生时代常玩的游戏之一 想必大家都不怎么陌生了吧 如果感到陌生的话 那难道这就表明了时代间的层层代沟 时代变化的太快了嘛 好了言归正卷了 那么前端怎么实现魔方小游戏呢 从以下几个方面细讲

结果是最好的印证品 这毋庸置疑的了

1、先将平面上的6个DIV拼接在一起。形成一张类似于3d立方体图形展开的平面图。

2、我们需要将每一个面旋转到相应的位置上，每一个面的旋转轴都是不一样的。上下，左右，分别对应的旋转轴,以及旋转角度分别是：bottom(90deg),top(-90deg),right(90deg),left(-90deg)。同时要注意在旋转后面的时候，旋转轴为Z轴，并不是上下，左右边。浏览器上面的坐标系是这样的：Z轴是屏幕里外两个方向（向外为正，向里为负），X轴的水平方向（向右为正，向左为负）；

3、接下来还有一个关键的步骤，就是当变换导致元素在 3D 空间中旋转时，指定当元素背面朝向观察者时不可见；

4、接下来我们要做的就是设置一下所处环境，我们要设置成3D的环境，具体的语法形式如下：transform-style: preserve-3d;

5、然后我们为了让立方体旋转起来，以便更好的实现3D效果。首先找到旋转中心，在3D魔方中，旋转中心就是立方体的几何中心。

鉴于文件目录太大 我也不太可能每个文件新建一个代码块书写 且时间是有限的哈 有需要的小伙伴 可以前往 测试使用

关键性代码 可都是有展示的哦 赶紧动手操作吧

更多前端小游戏代码 我们后会有期 喜欢的可以帮博主点点赞收藏一波嘛