css3魔方3乘3每层旋转_如何使用css3设计出一个立体旋转魔方？

需要先了解的知识：

①了解CSS的2d下的transform变化下的平移(translate)和旋转(rotate)。

②了解CSS的3d下的transform变化下的平移和旋转。

③使用transform设置原点，旋转依赖原点。

④无论2d空间，还是3d空间，平移都不依赖原点。

⑤2d空间下，旋转依赖的是2d空间下的某一个点。3d空间下，旋转时依赖的是3d空间下的某一点，一般情况下，都可以认为3d空间下的旋转是依赖于X轴或者Y轴或者Z轴进行旋转。

分析：魔方由6个面构成，需要将六个面组成立方体。

每一个面由3*3个小盒子构成。

起始需要将六个面都绝对定位到同一个位置，通过3dCSS平移、旋转将六个面组成立方体。

设计出一个3*3个小盒子构成的平面：

设计出9个小盒子并使用float的形式将九个小盒子合理的布局到平面中。

方案一：(先平移后旋转)    立体魔方案例一

①设计6个平面使用绝对定位到屏幕的同一位置。

②为每一个平面设计9个盒子排布到合理的位置(可以使用float或者inline-bolck或者绝对定位)。

③通过先平移后旋转的方式将六个面组成立方体。

④为包裹六个平面的盒子设置一个动画，立方体魔方将会旋转展示。

方案二：(先旋转后平移)       立体魔方案例二

①设计6个平面使用绝对定位到屏幕的同一位置。

②为每一个平面设计9个盒子排布到合理的位置(可以使用float或者inline-bolck或者绝对定位)。

③通过先旋转后平移的方式将六个面组成立方体。

注意在三维立体中，平面旋转后，对应的三个轴线(X、Y、Z))将随之移动。

④为包裹六个平面的盒子设置一个动画，立方体魔方将会旋转展示。

方案三：(先定原点后旋转)   立体魔方案例三

①设计6个平面使用绝对定位到屏幕的同一位置。

②为每一个平面设计9个盒子排布到合理的位置(可以使用float或者inline-bolck或者绝对定位)。

③通过先设置原点后旋转的方式将六个面组成立方体。

④为包裹六个平面的盒子设置一个动画，立方体魔方将会旋转展示。