css3-旋转的立方体

一、实现步骤

• 实现六个面的布局
• 将六个面包含在一个容器中

• 对这个容器运用旋转动画

  二、核心点：

• 页面 x,y,z 坐标系的构建（以正对屏幕方向参考方向，向左为 + x, 向下为+y, 向外为 +z）

• rotateX,rotateY,rotateZ角度方向判断，以对应轴正方向为参考，逆时针旋转为正角度顺时针为负角度。注意，旋转时，坐标轴是跟着一起做旋转的。
• 旋转中心默认为元素的中心点，可以通过transform-origin进行设置，本例中设为transform-origin：0 0

三、效果

四：代码：https://codepen.io/wlei/pen/bMMJax