在家无聊时做的，效果图如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>卡片翻转</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-family: '楷体';
}
.card{
position: relative;
height: 40rem;
max-width: 400px;
margin: 4rem auto;
perspective: 60rem;
}
.card-side{
height: 35rem;
border-radius: 15px;
width: 80%;
padding: 3rem;
color: white;
position: absolute;
left: 0;
top: 0;
backface-visibility: hidden;
transition: all 0.8s ease;
}
.card-side.back{
transform: rotateY(-180deg);
background-image: url(https://images.cenguigui.cn/i/2023/04/07/f6o8ys.png);
background-size: 420px 670px;
}
.card-side.front{
background-image: url(https://images.cenguigui.cn/i/2023/04/07/f6or6g.png);
background-size: 420px 670px;
}
.card:hover .card-side.front{
transform: rotateY(180deg);
}
.card:hover .card-side.back{
transform: rotateY(0deg);
}
</style>
</head>
<body>
<div class="card">
<div class="card-side front">
<h1>正面</h1>
</div>
<div class="card-side back">
<h1>反面</h1>
</div>
</div>
<!--樱花-->
<script src="https://www.cenguigui.cn/log/sakura.js"></script>
<!--樱花 end-->
</body>
</html>