如何使用纯 CSS 创建翻牌动画
Posted 坚果技术の博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用纯 CSS 创建翻牌动画相关的知识，希望对你有一定的参考价值。
下面的示例向您展示了如何使用纯 CSS 创建翻牌动画。
作者：坚果
公众号：“大前端之旅”
华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，javascript。
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-3d;
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-3d;
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 实现翻转卡片效果的端到端示例
以上是关于如何使用纯 CSS 创建翻牌动画的主要内容，如果未能解决你的问题，请参考以下文章