记 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的属性点击这里 (opens new window)

还有俩个CSS3案例:

1. 运用animation动画实现:

   CS3动画北极熊: 点击查看 (opens new window)

2. 这个运用到animation、rotate、translate、preserve-3d实现:

   3D转换-旋转照片: 点击查看 (opens new window)