翻牌效果
这是一个简单的翻牌效果，通过 HTML 和 CSS 实现。详细的实现和注意点如下：
HTML 结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>翻牌效果</title>
<style>
/* 样式将在下文详细解释 */
</style>
</head>
<body>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
正面
</div>
<div class="flip-card-back">
背面
</div>
</div>
</div>
</body>
</html>
CSS 样式
基本布局
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2c3e50; /* 深色背景 */
margin: 0;
font-family: Arial, sans-serif;
}
卡牌容器
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
perspective: 1000px;
}
内部容器
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5); /* 深色阴影 */
border-radius: 10px;
}
翻转效果
.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;
}
.flip-card-front {
background-color: #34495e; /* 深色正面 */
color: #ecf0f1; /* 浅色文字 */
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
.flip-card-back {
background-color: #e73cd0; /* 深色背面 */
color: #ecf0f1; /* 浅色文字 */
transform: rotateY(180deg);
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
注意点
- 透视效果:
perspective属性用于创建 3D 空间感。 - 动画过渡:
transition属性使旋转动作具有平滑过渡效果。 - 隐藏反面:
backface-visibility属性确保在旋转时，未旋转到前面的那一面是不可见的。 - 旋转效果: 通过
transform: rotateY(180deg)实现 Y 轴上的旋转翻转。
效果图
