CSS3实现图片翻转效果

直接上代码看效果

html:

<div class="father"><div class="before">正面</div><div class="after">反面</div></div>

css样式：

.father{width: 300px;height: 200px;position: relative;transition: all 1s linear;transform-style: preserve-3d;}.before,.after{width: 300px;height: 200px;position: absolute;top: 0;left: 0;}.before{background: red;}.after{background: lightblue;transform: rotateX(-180deg);}.father:hover{transform: rotateX(180deg);}

ps:1. 若缺少transform-style:preserve-3d；图片翻转效果就无法实现，实现翻转的关键2. transform-style属性需要配合transform属性使用，默认值是flat（子元素保留其3D位置。在2D平面呈现）；preserve-3d（子元素保留其3D位置）。