利用css3实现旋转的立方体
这里主要用到了css3的transform，rotate，translate，animation
首先给ul设置transform ：rotateX（-30deg） rotateY(-55deg)使物体看起来有立体感
然后给六个li，给li设成绝对定位，使六个li重叠到一起
先做上面，选择一个li使绕x轴旋转90deg，然后再沿z轴平移100px
再来后面，选择一个li使绕x轴旋转180deg，然后再沿z轴平移100px
再来下面，选择一个li使绕x轴旋转270deg，然后再沿z轴平移100px
接下来是前面，选择一个li使绕x轴旋转360deg（其实就是一个面不用动就行了），然后再沿z轴平移100px
然后是左面，选择一个li使绕Y轴旋转90deg，然后再沿z轴平移100px
然后是右面，选择一个li使绕Y轴旋转90deg，然后再沿z轴平移-100px
现在的效果是这样的
接下来是让他动起来了，给ul加上transform-style: preserve-3d;在定义一个动画使其围绕y轴旋转
最终的效果是这样的
详细代码https://github.com/hanihanihaani/css-demo/blob/master/rotateCube.html
转载自原文链接, 如需删除请联系管理员。
原文链接：css3实现旋转的立方体，转载请注明来源！