HTML+CSS 制作翻牌效果，点击查看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML+CSS 制作翻牌效果</title>
<style>
html {
font-size: 22px;
}
body {
height: 100vh;
background-color: #54a0ff;
font-family: Helvetica, Arial;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.card-container {
width: 160px;
height: 280px;
position: relative;
perspective: 1000px;
}
.cover, .back {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
font-size: 1.6rem;
border-radius: .4rem;
box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .18);
text-shadow: 0 .15rem .2rem rgba(0, 0, 0, .2);
transition: transform .25s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
}
.cover {
background-color: #ff6b6b;
color: #fff;
transform: rotatey(0deg);
}
.card-container:hover .cover {
transform: rotatey(180deg);
}
.back {
background-color: yellow;
transform: rotatey(-180deg);
}
.card-container:hover .back {
transform: rotatey(0deg);
}
</style>
</head>
<body>
<div class="card-container">
<div class="cover">
COVER
</div>
<div class="back">
BACK
</div>
</div>
<div class="card-container">
<div class="cover">
COVER
</div>
<div class="back">
BACK
</div>
</div>
<div class="card-container">
<div class="cover">
COVER
</div>
<div class="back">
BACK
</div>
</div>
</body>
</html>
