当前位置：首页 > backend >正文

4. 文字效果/2D-3D转换 - 3D翻转卡片

backend 2025/5/14 6:41:23

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>