直接上代码看效果
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位置)。