<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Hover Flip Card</title>
<style>
.flip-card {
width: 300px;
height: 300px;
perspective: 1000px; /* 为子元素提供 3D 空间视角 */
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /* 隐藏背面 */
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.flip-card-front {
background: #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.flip-card-front img {
width: 100%;
height: 100%;
object-fit: cover;
}
.flip-card-back {
color: white;
transform: rotateY(180deg); /* 背面默认翻转 180° 使其正面朝内 */
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
background: linear-gradient(to bottom, rgba(0, 90, 170, .8) 35%, #009965 100%);
}
</style>
</head>
<body>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<!-- 正面：图片 -->
<img src="https://via.placeholder.com/300" alt="示例图片">
</div>
<div class="flip-card-back">
<!-- 背面：文字介绍 -->
<p>这是图片的介绍文字。你可以在这里放任何你想展示的内容！</p>
</div>
</div>
</div>
</body>
</html>