悬停时卡片绕 Y 轴翻转到背面，正面背面内容互不干扰
← 返回 卡片 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .flipWrap{width:240px;height:160px;margin:40px auto;perspective:800px}
.fx .flipCard{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.4,.1,.2,1)}
.fx .flipWrap:hover .flipCard{transform:rotateY(180deg)}
.fx .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}
.fx .front{background:linear-gradient(135deg,#4a9eff,#a371f7)}
.fx .back{background:linear-gradient(135deg,#f778ba,#e5534b);transform:rotateY(180deg)}<div class="fx">
<div class="flipWrap"><div class="flipCard"><div class="face front">正面：悬停翻转</div><div class="face back">背面：惊喜内容</div></div></div>
</div>