# 卡片交换（Swap Transition）

镜语 · 特效与转场 / 三维翻转

- 别名：画面交换、前后换位、卡片换位、Swap
- 口语：「两张图像卡片一样前后换一下位置」「画面变小带倒影，跟下一张对调」
- 一句话：两张画面变成带倒影的卡片，在透视空间里前后换位
- 是什么：卡片交换把前后两个画面变成立在地面上的两张卡片，带倒影和透视，一张后退、一张向前，在空间里交换前后位置
- 缺了就不像：两张画面变成卡片；在纵深方向交换位置
- 加了更像：地面倒影；透视感
- 适合用在：产品对比、A/B 选择；作品集、多款式展示；「换一个」的轻松换场
- 看哪里：看两张画面下方都有倒影，并且一张从后面绕到前面；中途能同时看到两张完整画面
- 注意：画面缩小后细节难看清；带倒影的样式容易显得像老式 PPT
- 描述示例：做 Swap 卡片交换转场：画面 A 与画面 B 缩小成两张带地面倒影的卡片，在透视空间中 A 向后退、B 从后方移到前方，交换位置后 B 放大铺满全屏
- 易混：
  - [立方体翻转](https://idea.ameng.dev/terms/cube-transition.md)：立方体翻转两张画面贴在同一个立方体上；卡片交换是两张独立卡片换位
- 相关：[缩小推移](https://idea.ameng.dev/terms/scale-push.md)、[双门开启](https://idea.ameng.dev/terms/doorway.md)

## 来源与延伸阅读

- [GL Transitions · swap（gre，MIT）](https://github.com/gl-transitions/gl-transitions/blob/master/transitions/swap.glsl)

网页版（含演示）：https://idea.ameng.dev/terms/swap-transition