3D转换-转后不显示问题

记 CSS过程中遇到的一个小问题困住我的小细节

1. 学习CSS３的3D转换过程中，想做一个案例：两面翻转的盒子
2. 首先来看，实现的最终效果, 如图所示：鼠标一碰到盒子，盒子就会翻转

实现步骤：

首先写一个父盒子包含两个子盒子, box是翻转盒子,f1和f2是前和后的两个子盒子

<div class="box">
    <div class="f1">正面</div>
    <div class="f2">反面</div>
</div>

1. box先指定大小, 后面给盒子添加上3D呈现属性(transform-style: preserve-3d)
2. 两个小盒子要加定位, f1盒子加上z-index:1; f2 子盒子沿着Y轴旋转 180deg
3. 最后鼠标hover: box 沿着Y轴旋转 180deg
4. 你以为就完事了??? NO !

• 重点来了，这样写会发现box父盒子转动后不显示后面的f2子盒子
• 解决方法: 在 f1 标签上加: backface-visibility: hidden; 才可以转动
• 具体… 我也不知道什么原因, 之前不加就可以的
• 关于backface-visibility: hidden的属性点击这里

还有俩个CSS3案例:

1. 运用animation动画实现:

​ CS3动画北极熊: 点击查看

1. 这个运用到animation、rotate、translate、preserve-3d实现: 3D转换-旋转照片: 点击查看