如何在CSS中使用动画制作图片翻转_transform rotateY @keyframes结合-css教程-PHP中文网

如何在CSS中使用动画制作图片翻转_transform rotateY @keyframes结合

P粉602998670

发布： 2025-11-27 13:25:02

原创

497人浏览过

答案：使用CSS的transform、rotateY和@keyframes可实现图片翻转动画。首先构建包含图片的容器，设置perspective和transform-style启用3D空间；接着定义从0到180度的rotateY关键帧动画，并绑定至图片，配置时长、缓动及循环方式；最后可通过:hover配合transition实现悬停触发的翻转效果，无需JavaScript，适合卡片展示等交互场景。

如何在css中使用动画制作图片翻转_transform rotatey @keyframes结合

想让图片在页面上实现翻转动画，可以使用CSS的 transform、rotateY 和 @keyframes 配合完成。这种方式常用于制作卡片翻转、图片展示等交互效果。下面教你一步步实现。

1. 基本结构：准备HTML元素

先写一个包含图片的容器，便于控制翻转效果：

<div class="flip-container">
  <img src="your-image.jpg" alt="翻转图片" class="flip-image">
</div>

登录后复制

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轴旋转动画：

立即学习“前端免费学习笔记（深入）”；

腾讯混元文生视频

腾讯发布的AI视频生成大模型技术

266

查看详情

@keyframes flipHorizontally {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

登录后复制

4. 应用动画到图片

将定义好的动画绑定到图片上，设置持续时间、动画次数等：

.flip-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
<p>animation-name: flipHorizontally;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite; /<em> 可改为 1 或 alternate </em>/
animation-direction: alternate; /<em> 往返播放 </em>/
}</p>

登录后复制

5. 进阶：悬停触发翻转（无需JavaScript）

如果希望鼠标移上时才翻转，可以结合 :hover 和 transition 实现更自然的交互：

.flip-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
<p>transition: transform 0.8s ease;
transform-style: preserve-3d;
}</p><p>.flip-container:hover .flip-image {
transform: rotateY(180deg);
}</p>

登录后复制

这种做法更轻量，适合简单的交互场景。

基本上就这些。你可以根据需要调整角度、速度或添加背面内容（如卡片两面），但核心是理解 rotateY 与3D上下文的配合。不复杂但容易忽略细节。

以上就是如何在CSS中使用动画制作图片翻转_transform rotateY @keyframes结合的详细内容，更多请关注php中文网其它相关文章！