需要先了解的知识：
①了解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或者绝对定位）。
③通过先设置原点后旋转的方式将六个面组成立方体。
④为包裹六个平面的盒子设置一个动画，立方体魔方将会旋转展示。
网友评论