用css的transform: rotatey(180deg)配合transition可实现图片悬停翻转效果，无需javascript；需外层设perspective和transform-style: preserve-3d，正反面元素用absolute定位并设backface-visibility: hidden，hover时容器旋转180度完成翻转。
用CSS的transform: rotateY(180deg)配合transition就能轻松实现图片悬停翻转效果，不需要JavaScript。
基础翻转结构（正面+背面）
单张图片只能“翻面”，但视觉上更自然的是准备正反两面内容——比如正面是缩略图，背面是文字介绍。需要一个容器包裹两个元素，并设为相对定位：
- 外层容器设
position: relative和perspective（如perspective: 1000px），让3D变换有景深感 - 内部两个子元素（正面
.front、背面.back）都设position: absolute、宽高一致、居中覆盖 - 背面默认绕Y轴旋转180度：
transform: rotateY(180deg)
添加过渡与悬停触发
关键在给两个面统一加transition: transform 0.6s ease-in-out，再通过容器:hover控制整体旋转：
- 容器悬停时，让正面旋转180°，背面同时转回0°，实现“翻转交换”
- 更简洁的做法是：只对容器设
transform: rotateY(180deg)，再用transform-style: preserve-3d保持子元素3D空间关系 - 记得给
.front和.back加上backface-visibility: hidden，避免翻转时看到背面内容反向显示
纯图片翻转（单图简易版）
如果只要一张图悬停后自身翻转（类似卡片翻动），结构更简单：
- 直接给
<img>标签设transition: transform 0.5s - 写
img:hover { transform: rotateY(180deg); } - 注意：需加
transform-style: preserve-3d到父容器，且父容器要有perspective才有效果 - 部分浏览器需加
-webkit-前缀兼容旧版
小细节提升体验
让动画更自然，可以微调几个属性：
- 用
ease-in-out比linear更柔和 - 翻转时间建议0.4–0.7秒，太短显得突兀，太长拖沓
- 若图片边缘有锯齿，加
backface-visibility: hidden或transform: translateZ(0)触发硬件加速 - 移动端慎用，悬停在触屏设备上不生效；可额外加点击切换逻辑（需JS）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
