4. 文字效果/2D-3D转换 - 3D翻转卡片
案例：3D产品展示卡片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.scene {
width: 300px;
height: 400px;
perspective: 1000px;
margin: 50px auto;
}
.card {
width: 100%;
height: 100%;
position: relative;
transition: transform 1s;
transform-style: preserve-3d;
}
.scene:hover .card {
transform: rotateY(180deg);
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.card-front {
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.card-back {
background: linear-gradient(45deg, #a18cd1, #fbc2eb);
transform: rotateY(180deg);
padding: 20px;
box-sizing: border-box;
}
.product-title {
font-size: 24px;
margin-bottom: 10px;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.product-image {
width: 80%;
filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.2));
}
.product-description {
color: white;
line-height: 1.6;
}
</style>
<body>
<div class="scene">
<div class="card">
<div class="card-face card-front">
<h2 class="product-title">智能手表</h2>
<img src="smartwatch.png" class="product-image">
</div>
<div class="card-face card-back">
<h3>产品特性</h3>
<p class="product-description">
心率监测 | 运动追踪 | 50米防水<br>
14天续航 | 通知提醒 | 多种表盘
</p>
<div class="price">¥899</div>
</div>
</div>
</div>
</body>
</html>
