.card { position:relative; } .card__side { transition:all .8s ease; color:white; font-size:2rem; position:absolute; top:0; left:0; height:300px; width:500px; backface-visibility:hidden; } .card__side--front { /* background-color:#2196F3; */ position:relative; background-position:center; background-repeat:no-repeat; background-size:cover; } .card__side--back { /* background-color:#303F9F; */ transform:rotateY(180deg); background-position:center; background-repeat:no-repeat; background-size:cover; } .showGreen { transform:rotateY(-180deg); } .showRed { transform:rotateY(0); } #front-7 { background-image:url(http://www.jq22.com/img/cs/500x300-1.png); } /* Back */ #back-7 { background-image:url(http://www.jq22.com/img/cs/500x300-1.png); }
更新时间:2020-04-30 18:32:10
自动翻转
大尺寸看着好像有点别扭 实际项目用的是小图
大尺寸没那个需求 暂不改