No.5 - 纯 CSS 制作绕中轴旋转的立方体

任务
视频demo
我做的效果

小结

可以先对好吧，CSS3 3D transform变换，不过如此！的transition详解学习。
过程中遇到的问题，注意transform中的 变形书写顺序 问题
以我的demo中横向的p-left面、纵向的p-top面为例进行静态布局说明
正确的为（p-front先隐藏易于观察）

<style>
.p-left{ // 默认css
  transform: rotateX(0deg) // 绕X轴旋转
             rotateY(270deg) //绕Y轴旋转
             translateZ(100px); //往Z轴
}
.p-top{
  transform: rotateX(90deg) 
             rotate(0) 
             translateZ(100px)
}
</style>

改变顺序后注意坐标轴的变化
rotate、rotateX、rotateY和rotateZ影响坐标轴，通过预测最后的坐标轴方向在做translate的计算，达到预期。多个rotate中不能放translate,否则无效