.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实现的翻转效果