3D 翻转卡片
3D 翻转卡片：正反两面背靠背，悬停时整张卡片 rotateY(180deg) 翻到背面。结构：外层 perspective 透视容器，内层 transform-style: preserve-3d 保留 3D 空间，正反面 absolute 重叠，背面 backface-visibility: hidden。
perspective 写在外层（如 800px），值越小透视越夸张；翻牌游戏、作品集、会员卡都能用这套结构。
- 外层 perspective:800px 透视；内层 preserve-3d 才能保留 3D
- 正反面 absolute 重叠；背面需 backface-visibility:hidden
- :hover 或加 .flip 类触发 rotateY(180deg)
HTML
<style> .flipWrap { width: 240px; height: 160px; margin: 40px auto; perspective: 800px; } .flipCard { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.4,.1,.2,1); } .flipWrap:hover .flipCard { transform: rotateY(180deg); } .face { position: absolute; inset: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; color: #fff; font-size: 18px; } .front { background: linear-gradient(135deg,#4a9eff,#a371f7); } .back { background: linear-gradient(135deg,#f778ba,#e5534b); transform: rotateY(180deg); } </style> <div class="flipWrap"><div class="flipCard"> <div class="face front">正面：悬停翻转</div> <div class="face back">背面：惊喜内容</div> </div></div>
本节要点翻转卡片三件套：perspective 容器 + preserve-3d 内层 + backface-hidden 双面。
