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

答案是使用transition结合rotatey实现卡片翻转更高效。通过设置perspective和transform-style: preserve-3d，利用backface-visibility隐藏背面，hover时触发rotatey(180deg)并配合transition实现平滑翻转效果。

如何在css中制作卡片翻转动画_transform rotatey结合@keyframes实现

在CSS中实现卡片翻转动画，可以通过 transform 的 rotateY 属性结合 @keyframes 来完成。这种效果常用于展示卡片背面信息，比如产品介绍、人物名片等。下面详细介绍实现方法。

1. 基本结构与样式设置

先构建HTML结构，通常使用一个容器包裹前后两面：

<div class="card">
  <div class="card-face front">正面内容</div>
  <div class="card-face back">背面内容</div>
</div>

为卡片设置基础样式，启用3D变换效果：

.card {
  width: 200px;
  height: 300px;
  position: relative;
  perspective: 1000px; /* 创建3D透视感 */
}
<p>.card-face {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden; /<em> 隐藏背面时不可见 </em>/
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: white;
}</p><p>.front {
background: #3498db;
z-index: 2;
}</p><p>.back {
background: #e74c3c;
transform: rotateY(180deg); /<em> 背面初始旋转180度 </em>/
}</p>

2. 使用 @keyframes 定义翻转动画

通过 @keyframes 定义从0到180度的Y轴旋转过程：

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

然后将动画应用到整个卡片容器或特定触发状态：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

.card:hover .front {
  animation: flip 0.6s forwards;
}
<p>.card:hover .back {
animation: flip 0.6s forwards;
animation-delay: 0.6s; /<em> 等正面翻完再开始翻回 </em>/
}</p>

注意：这种方式适合一次性播放动画。若希望平滑来回翻转，推荐直接使用 :hover 触发 transform 变化并配合过渡（transition）更自然。

3. 更流畅的交互方式：配合 transition 实现双向翻转

虽然 @keyframes 适合复杂帧动画，但简单翻转用 transition 更高效：

.card {
  width: 200px;
  height: 300px;
  position: relative;
  perspective: 1000px;
}
<p>.card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}</p><p>.card:hover .card-inner {
transform: rotateY(180deg);
}</p><p>.front, .back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: white;
}</p><p>.front {
background: #3498db;
}</p><p>.back {
background: #e74c3c;
transform: rotateY(180deg);
}</p>

此时无需 @keyframes，靠 transition 自动补间动画，鼠标移入即翻转，移出自动复原，体验更自然。