透视倾斜 Image Tilt Hover

图片在鼠标悬停时通过 perspective 和 rotate 产生 3D 倾斜效果。

实时预览

代码

css

.tilt-container { perspective: 600px; }
.tilt-img {
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}
.tilt-container:hover .tilt-img {
  transform: rotateY(-12deg) rotateX(8deg);
}

html

<div class="tilt-container">
  <img class="tilt-img" src="image.jpg" alt="">
</div>

纯 CSS 实现的透视倾斜图片动画——通过滤镜、变换和遮罩让图片在悬停或滚动时产生视觉效果。适用于商品图、相册、文章插图等场景。

快速使用

复制 CSS 代码到你的样式文件中
在图片外层包裹一个带 overflow: hidden 的容器
给图片添加对应的 class 名称
调整缩放比例、模糊半径等参数

使用场景

商品图/相册：悬停缩放让用户看清细节，模糊切换增加浏览趣味
文章插图：视差滚动让图片和文字有不同的滚动层次
用户头像：灰度到彩色的过渡展示在线/离线状态或会员身份
卡片封面图：遮罩揭示或倾斜让静态封面有动态交互感

常见问题

Q: 图片缩放动画会影响图片清晰度吗？ A: transform: scale() 在合成层执行，图片先以原始分辨率渲染再缩放——放大时可能出现轻微模糊。建议初始加载比容器稍大的图片，缩放时只做缩小操作。或者用 image-rendering 优化。

Q: 如何让图片懒加载配合动画？ A: 使用 loading="lazy" 原生懒加载。图片加载完成前可以用 CSS 骨架屏或模糊占位（filter: blur(20px)），加载完成后添加 .loaded 类触发 blur→0 过渡。

Q: 滤镜动画（grayscale/blur）的性能如何？ A: filter 由 GPU 处理，性能较好。但 blur() 半径越大，GPU 开销越大。建议 blur 半径不超过 20px，并且在动画完成后移除/简化 filter。IE 不支持 filter，需降级。

浏览器兼容性

浏览器	兼容性
Chrome / Edge	✅ 完全支持
Firefox	✅ 完全支持
Safari	✅ 完全支持（注意 filter 性能）
移动端浏览器	✅ 完全支持
IE 11	❌ filter 和高级 transform 不支持

使用说明

属性	说明
`perspective: 600px`	设置 3D 透视距离
`rotateY(-12deg)`	绕 Y 轴旋转，产生左右倾斜
`rotateX(8deg)`	绕 X 轴旋转，产生前后倾斜
`transform-style: preserve-3d`	保持子元素 3D 变换

透视倾斜 Image Tilt Hover ​

实时预览 ​

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

使用说明 ​

📎 相关动画推荐