下面的示例向您展示了如何使用纯 CSS 创建翻牌动画。
“ 作者:坚果
公众号:"大前端之旅 "
华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术的分享,包括Flutter,小程序,安卓,VUE,JavaScript。
” chip
HTML <body > <h1 > 大前端之旅</h1 > <h3 > Flipping Card: An Example</h3 > <div class ="card" > <div class ="card__content" > <div class ="card__front" > <h1 > ?</h1 > </div > <div class ="card__back" > <h1 > This is a big secret</h1 > </div > </div > </div > </body >
CSS .card { margin : auto; width : 300px ; height : 400px ; perspective : 1000px ; background-color : transparent; } .card__content { position : relative; width : 100% ; height : 100% ; text-align : center; transition : all 1s ; transform-style : preserve-3 d; box-shadow : 0 3px 6px 0 rgba (0 , 0 , 0 , 0.15 ); } .card :hover .card__content { transform : rotateY (180deg ); } .card__front , .card__back { position : absolute; width : 100% ; height : 100% ; -webkit-backface-visibility : hidden; backface-visibility : hidden; display : flex; justify-content : center; align-items : center; color : white; } .card__front { background-color : red; font-size : 150px ; } .card__back { background-color : indigo; transform : rotateY (180deg ); font-size : 36px ; }
完整代码 <!DOCTYPE html > <html > <head > <meta name ="viewport" content ="width=device-width, initial-scale=1" /> <style > .card { margin : auto; width : 300px ; height : 400px ; perspective : 1000px ; background-color : transparent; } .card__content { position : relative; width : 100% ; height : 100% ; text-align : center; transition : all 1s ; transform-style : preserve-3 d; box-shadow : 0 3px 6px 0 rgba (0 , 0 , 0 , 0.15 ); } .card :hover .card__content { transform : rotateY (180deg ); } .card__front , .card__back { position : absolute; width : 100% ; height : 100% ; -webkit-backface-visibility : hidden; backface-visibility : hidden; display : flex; justify-content : center; align-items : center; color : white; } .card__front { background-color : red; font-size : 150px ; } .card__back { background-color : indigo; transform : rotateY (180deg ); font-size : 36px ; } </style > <title > 大前端之旅</title > </head > <body > <h1 > 大前端之旅</h1 > <h3 > Flipping Card: An Example</h3 > <div class ="card" > <div class ="card__content" > <div class ="card__front" > <h1 > ?</h1 > </div > <div class ="card__back" > <h1 > This is a big secret</h1 > </div > </div > </div > </body > </html >
最后的话 我们已经研究了一个使用纯 CSS 实现翻转卡片效果的端到端示例