悬停时卡片 3D 后仰,像拿起来斜着看一样
← 返回 卡片 类特效列表上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果
.fx{perspective:900px;padding:36px 0}
.fx .tk{width:250px;height:150px;margin:0 auto;border-radius:16px;background:linear-gradient(135deg,#57ab5a,#4a9eff);transition:transform .4s ease;box-shadow:0 10px 26px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.fx .tk:hover{transform:rotateX(14deg) rotateY(-14deg) scale(1.04)}<div class="fx">
<div class="tk">悬停 3D 倾斜</div>
</div>