实现翻牌的效果css
/* 翻的正面 */
.front-pai{
width: 200rpx;
height: 258rpx;
background-color: #e24444;
padding-bottom: 14rpx;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
opacity: 1;
transform-origin: center;
transform: rotateY(0deg);
transition: opacity .8s, transform .8s;
}
/* 翻的结果面 */
.back-pai{
width: 200rpx;
height: 258rpx;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transform-origin: center;
transform: rotateY(90deg);
transition: opacity .8s, transform .8s .5s;
}
/* 翻的效果 */
.front-ani{
opacity: 0;
transform: rotateY(90deg);
}
.back-ani{
opacity: 1;
transform: rotateY(0);
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步