本文详细介绍了如何使用CSS3实现元素的翻转效果，包括水平和垂直翻转。通过设置transform-style、perspective、hover状态下的rotate属性等，实现在鼠标滑过时元素180度翻转，展示正反两面。文章还提到了在实现过程中遇到的宽高匹配、3D效果丢失等问题及解决方案。
当鼠标滑过包含块时，元素整体翻转180度，以实现“正”“反”面的切换。
分析：.container，.flip为了实现动画效果做准备。.front,.back各包裹一张图片。
实现该效果的HTML如下：
<div class="container">
<div class="flip">
<div class="front">
<img src="images/pic00.jpg" alt="">
</div>
<div class="back">
<img src="images/pic01.jpg" alt="">
</div>
</div>
</div>
422
3742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
最低0.47元/天 解锁文章
