答案：使用CSS的transform、rotateY和@keyframes可实现图片翻转动画。首先构建包含图片的容器，设置perspective和transform-style启用3D空间；接着定义从0到180度的rotateY关键帧动画，并绑定至图片，配置时长、缓动及循环方式；最后可通过:hover配合transition实现悬停触发的翻转效果，无需JavaScript，适合卡片展示等交互场景。
想让图片在页面上实现翻转动画，可以使用CSS的 transform、rotateY 和 @keyframes 配合完成。这种方式常用于制作卡片翻转、图片展示等交互效果。下面教你一步步实现。
1. 基本结构：准备HTML元素
先写一个包含图片的容器，便于控制翻转效果：
@@##@@
2. 设置容器和3D变换环境
要让 rotateY 生效，必须启用3D空间。通过 transform-style: preserve-3d 和设置 perspective 来增强立体感：
.flip-container {
perspective: 1000px; /* 模拟视觉深度 */
display: inline-block;
}
.flip-image {
width: 300px;
height: 200px;
object-fit: cover;
}
3. 定义关键帧动画 @keyframes
使用 @keyframes 创建从0度到180度的Y轴旋转动画：
立即学习“前端免费学习笔记（深入）”；
@keyframes flipHorizontally {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(180deg);
}
}
4. 应用动画到图片
将定义好的动画绑定到图片上，设置持续时间、动画次数等：
.flip-image {
width: 300px;
height: 200px;
object-fit: cover;
animation-name: flipHorizontally;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite; / 可改为 1 或 alternate /
animation-direction: alternate; / 往返播放 /
}
5. 进阶：悬停触发翻转（无需JavaScript）
如果希望鼠标移上时才翻转，可以结合 :hover 和 transition 实现更自然的交互：
.flip-image {
width: 300px;
height: 200px;
object-fit: cover;
transition: transform 0.8s ease;
transform-style: preserve-3d;
}
.flip-container:hover .flip-image {
transform: rotateY(180deg);
}
这种做法更轻量，适合简单的交互场景。
基本上就这些。你可以根据需要调整角度、速度或添加背面内容（如卡片两面），但核心是理解 rotateY 与3D上下文的配合。不复杂但容易忽略细节。
