html
<div class="transformImg">
<img class="before" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4251646071,1773737285&fm=26&gp=0.jpg" alt="" />
<img class="after" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1231723957,2972681918&fm=26&gp=0.jpg" alt="" />
</div>
css
.transformImg {
width: 200px;
height: 200px;
position: relative;
transition: all 1s linear;
transform-style: preserve-3d;
}
.transformImg img {
width: 100%;
}
.before,
.after {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.after {
transform: rotateY(-180deg);
}
.transformImg:hover {
transform: rotateY(180deg);
}
tip: 主要是利用css3的3d翻轉(zhuǎn)效果
