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

  1. 学习CSS３的3D转换过程中，想做一个案例：两面翻转的盒子

  2. 首先来看，实现的最终效果, 如图所示：鼠标一碰到盒子，盒子就会翻转

实现步骤：

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

1
2
3
4
<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动画北极熊: 点击查看

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

    3D转换-旋转照片: 点击查看