记 CSS过程中遇到的一个小问题困住我的小细节
- 学习CSS３的3D转换过程中，想做一个案例：两面翻转的盒子
- 首先来看，实现的最终效果, 如图所示：鼠标一碰到盒子，盒子就会翻转
实现步骤：
首先写一个父盒子包含两个子盒子, box是翻转盒子,f1和f2是前和后的两个子盒子
代码语言：javascript复制<div class="box">
<div class="f1">正面</div>
<div class="f2">反面</div>
</div>- box先指定大小, 后面给盒子添加上3D呈现属性(transform-style: preserve-3d)
- 两个小盒子要加定位, f1盒子加上z-index:1; f2 子盒子沿着Y轴旋转 180deg
- 最后鼠标hover: box 沿着Y轴旋转 180deg
- 你以为就完事了??? NO !
- 重点来了，这样写会发现box父盒子转动后不显示后面的f2子盒子
- 解决方法: 在 f1 标签上加: backface-visibility: hidden; 才可以转动
- 具体… 我也不知道什么原因, 之前不加就可以的
- 关于backface-visibility: hidden的属性点击这里
还有俩个CSS3案例:
- 运用animation动画实现:
CS3动画北极熊: 点击查看
- 这个运用到animation、rotate、translate、preserve-3d实现: 3D转换-旋转照片: 点击查看
