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

现在的效果是这样的

css3实现旋转的立方体_第1张图片

接下来是让他动起来了,给ul加上transform-style: preserve-3d;在定义一个动画使其围绕y轴旋转

最终的效果是这样的

css3实现旋转的立方体_第2张图片


详细代码https://github.com/hanihanihaani/css-demo/blob/master/rotateCube.html

你可能感兴趣的:(css)