变成了这样的效果
现在我们就给我们的父盒子box加上一个transform-style:preserve-3d,看看效果如何:
现在便有了立体的效果嘿嘿....刚刚又做了一个案例,还是稍稍有点难的,主要是很难想:
主要的思路:
先放一个大的盒子.box,然后再在里面放两个小盒子,一个是正面.front,一个是背面.back,给两个盒子设置好大小和文字之类的属性...就可以得到上面的旋转图.
重点来了:
当我们给两个盒子设置了定位以后,出现在上面的是back盒子,因为back盒子在结构中处于下面,必然会把正面的盒子压住....如何让正面反过来的时候出现背面的盒子且是正确显示的呢?按理来说,背后的盒子如果直接翻转过来,文字是反的.
最后翻转的时候盒子的背面显示不出来....解决方法:
我们可以使用z-index,给.front来个1的z-index值.front盒子就可以显示在上面了.