HTML5折叠卡片翻书式特效

原创已于 2025-06-27 15:58:28 修改 · 298 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #html

于 2025-04-18 16:36:00 首次发布

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>折叠卡片翻书式特效</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<style>
.book-container {
perspective: 1000px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.book {
position: relative;
width: 300px;
height: 400px;
transform-style: preserve-3d;
transition: transform 0.5s;
}

.book:hover {
transform: rotateY(180deg);
}

.page {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: white;
}

.front {
background-color: #3498db;
}

.back {
background-color: #e74c3c;
transform: rotateY(180deg);
}
</style>
</head>