<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>卡片翻页</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: flex-start;
height: 100vh;
background-color: #353535;
padding-top: 100px;
font-size: 4em;
color: #333;
font-family: 'Arial Rounded MT';
text-align: center;
}
.card-container {
background-color: #d7d7d7;
width: 100px;
height: 100px;
position: relative;
perspective: 500px;
}
.card-container::before {
content: '';
position: absolute;
left: 0;
top: 50%;
background: linear-gradient(to bottom, #000, #000 1px, #fff 1px);
width: 100%;
margin-top: -1px;
z-index: 99;
}
.card {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 50%;
overflow: hidden;
backface-visibility: hidden;
transition: .5s;
}
.card1 {
background-color: #2da0d6;
line-height: 100px;
}
.card2 {
background-color: #6fe381;
top: 50%;
line-height: 0;
transform: rotateX(180deg);
transform-origin: center top;
z-index: 10;
}
.card-container:hover .card2 {
transform: rotateX(0deg);
}
.card3 {
background-color: #f1cd81;
line-height: 100px;
transform-origin: center bottom;
}
.card-container:hover .card3 {
transform: rotateX(-180deg);
}
.card4 {
background-color: #eca5a1;
top: 50%;
line-height: 0;
}
</style>
<body>
<div class="card-container">
<div class="card card1">3</div>
<div class="card card2">3</div>
<div class="card card3">4</div>
<div class="card card4">4</div>
</div>
</body>
</html>