透视倾斜卡片 · 卡片
前端Wiki/CSS 特效合集/透视倾斜卡片

透视倾斜卡片

悬停时卡片 3D 后仰,像拿起来斜着看一样

← 返回 卡片 类特效列表
悬停 3D 倾斜

上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果

CSS 代码

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)}

HTML 结构

HTML
<div class="fx">
<div class="tk">悬停 3D 倾斜</div>
</div>
实现要点:perspective 父容器 + rotateX/rotateY 组合旋转

其它卡片类特效

回到 前端Wiki 首页 · CSS 特效合集