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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-27

浏览次数：次

返回列表

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

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

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

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

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

<div class="flip-container">
  @@##@@
</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轴旋转动画：

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

4. 应用动画到图片

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

语鲸

AI智能阅读辅助工具

314 查看详情

.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. 进阶：悬停触发翻转（无需J*aScript）

如果希望鼠标移上时才翻转，可以结合 :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上下文的配合。不复杂但容易忽略细节。翻转图片