动画 · 形变与变换 · 17

翻转卡片

翻转卡片 = 卡片沿 Y 轴做 3D 旋转，在悬停或点击时翻出另一面（正面/背面）。

Front

Back

尊重 prefers-reduced-motion：动画关闭，仅保留终态。

怎么向 AI 描述它

Make a flip card: rotateY 0 to 180 on hover with perspective, front and back faces, transform only.

Flip on a vertical (X) axis instead and shorten the turn to 0.6s for a snappier toggle.

Drive the flip from a real hover/tap state (not an infinite loop), add perspective: 1000px on the parent, expose --flip-duration, and under prefers-reduced-motion swap to an opacity cross-fade between faces. Keep both faces in the same bounding box.

修改类 Prompt 只动目标，不碰页面其余部分。

翻转卡片是什么？

翻转卡片绕垂直轴旋转露出背面——正面放引子，背面放详情。它因使用真实透视而显得有实体感，是紧凑的双态容器。桌面悬停翻、触屏点击翻，且只绕一个轴，才不会像故障。

动画标本

触发: hover
技术: css
时长: 3.2s
缓动: cubic-bezier(0.4, 0, 0.2, 1)
性能: transform

什么时候用

Teaser -> detail (product, profile, glossary term)
Two-sided stats or Q&A cards

什么时候别用

When both faces must be visible at once (use tabs)
On tiny touch targets — the back is hard to read

Give the parent real perspective, or the flip looks like a flat skew, not a turn.

获取代码

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.flip { perspective: 700px; width: min(150px, 100%); height: 100px; }
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation-name: flip;
  animation-duration: var(--anim-duration, 3.2s);
  animation-timing-function: var(--anim-easing, cubic-bezier(0.4, 0, 0.2, 1));
}
.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  backface-visibility: hidden;
  font: 600 14px/1 'Plus Jakarta Sans', system-ui, sans-serif;
}
.flip-front { background: var(--anim-accent); color: #fff; }
.flip-back {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e6e7ec);
  color: var(--ink, #1a1c22);
  transform: rotateY(180deg);
}
@keyframes flip {
  0%, 40% { transform: rotateY(0); }
  60%, 100% { transform: rotateY(180deg); }
}

<div class="flip"><div class="flip-inner anim-el"><div class="flip-front">Front</div><div class="flip-back">Back</div></div></div>

复制后即可用于你的项目。动效仅作用于 transform / opacity；颜色取自 --anim-accent。

另见

风格

玻璃拟态→

主题

AI SaaS 落地页→

组件

卡片→

翻转卡片

翻转卡片是什么？

动画标本

什么时候用

什么时候别用

另见

组件

动画

风格

主题

Prompt

术语

反模式

翻转卡片

翻转卡片是什么？

动画 标本

什么时候用

什么时候别用

另见

动画标本