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

逆战班

相关文章: