css立方体的实现
这是一个有六个和背景大小相同的li 给他们定位到一个地方给父元素一个3d空间transform-style: preserve-3d;
给整个div一个旋转动画 给第一个li向后移动200px 这个时候一个正方体的前后就可以看到了
让第2,3两个li分别向左右移动200px 让他们沿着紧靠背景的中心点旋转
正方体的左右两边的位置就好。下两面也是用这种方法来实现的。
旋转的原点设置transform-origin:left/right/top/center/bottom
把上下两个面给 移动好 一个正方体就出现了。
相关文章: