图片倾斜悬停 4 种特效（倾斜放大/回正/3D翻转 CSS 源码）

效果演示（真实可交互）

把鼠标移到任意图片上，观察倾斜姿态的变化。四种玩法分别展示了 rotate、scale、rotateX/rotateY 与 box-shadow 的组合用法，全部为纯 CSS 实现。

完整代码

HTML 结构：每张图片是一个 figure，.it-img 为图片容器（项目中换成 <img>），通过类名切换四种玩法：

<figure class="it-card">
  <div class="it-img it-tilt-zoom"><span>🏔️</span></div>
  <figcaption>倾斜放大</figcaption>
</figure>

核心 CSS：

.it-img {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1),
              box-shadow .5s ease;
  will-change: transform;
}

/* ① 倾斜 -6° 并放大 */
.it-card:hover .it-tilt-zoom { transform: rotate(-6deg) scale(1.12); }

/* ② 默认倾斜 4°，悬停回正 */
.it-tilt-straight { transform: rotate(4deg); }
.it-card:hover .it-tilt-straight { transform: rotate(0deg) scale(1.05); }

/* ③ 3D 翻转：perspective 提供景深 */
.it-card:hover .it-3d {
  transform: perspective(700px) rotateX(10deg) rotateY(-12deg) scale(1.06);
}

/* ④ 倾斜 + 投影加深 */
.it-card:hover .it-tilt-shadow {
  transform: rotate(5deg) scale(1.08);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .22);
}

参数说明

兼容性与性能

• 纯 CSS 实现，Chrome / Firefox / Safari / Edge 现代版本全部支持，perspective() 函数是标准写法
• 动画只作用于 transform 与 box-shadow，其中 transform 由 GPU 合成，性能良好
• 注意 aspect-ratio 需要 Chrome 88+ / Safari 15+，旧浏览器可用 padding-top 技巧
• 3D 玩法在超低端设备上可能出现轻微锯齿，建议配合 transform: translateZ(0) 触发硬件加速

常见问题

Q: 图片倾斜后底部会露出背景色，怎么处理？ 给 .it-img 外层容器加大圆角并设置 overflow: hidden，或把 scale(1.12) 与倾斜搭配使用，放大可以盖住边缘空隙。

Q: 想做成鼠标跟随的倾斜而不是固定角度？ 固定角度版本是纯 CSS；需要跟随鼠标动态倾斜，可参考本站的「卡片 3D 倾斜悬停」组件，用少量 JS 计算鼠标位置。

Q: 为什么我的 3D 翻转没有立体感？ 检查 perspective() 是否写在 transform 的第一个位置，并且父容器没有 overflow: hidden 裁掉 3D 透视，两者缺一都会让效果变平。

Q: 触屏设备上怎么触发倾斜？ 触屏没有 hover，首次点击会触发 hover 态；如需专门的手势倾斜，可监听 touchmove 用 JS 控制 transform 属性。