css3实现旋转的立方体

利用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