.wrapDiv {
width:400px;
height:auto;
position:relative;
}
.pic {
width:400px;
height:280px;
transition:.3s;
}
.pic img {
width:400px;
height:280px;
transition:.3s;
border-radius:10px;
}
.cont {
opacity:0;
width:400px;
height:280px;
position:absolute;
top:0;
line-height:32px;
border-radius:10px;
font-size:22px;
background-color:#EEEEEE;
color:#5A5A5A;
transform:rotateY(-180deg);
transition:.3s;
}
.wrapDiv:hover .pic {
transform:rotateY(180deg);
opacity:0;
transition:.3s;
}
.wrapDiv:hover .cont {
opacity:1;
transform:rotateY(0);
transition:.3s;
}
更新时间:2020-06-10 00:39:30
纯css利用伪类:hover 和transform实现的翻转效果