css实现图片正反面翻转特效
css实现图片正反面翻转特效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位置）。
页:
[1]