3D 翻转卡片动画怎么做？KinoViz 3D Flip 效果完整教程
产品卡片翻个面露出价格，logo 转一圈立体登场，数字像老式翻页钟一样啪嗒切换——这些都属于「3D 翻转」效果，也是近两年短视频封面、落地页 hero、社媒动图里很常见的动效之一。
效果好看，但真要自己做，很多人会卡在两个地方：要么用代码写 CSS 3D 变换，反复调 perspective、backface-visibility；要么用传统视频剪辑软件，却发现里面没有明确的「3D 空间旋转」概念，只能用位移和缩放硬凑。
这篇教程介绍另一种做法：在 KinoViz 里，3D 翻转是一个可视化的效果模块，拖动滑块就能实时预览，还可以直接添加关键帧做成动画、叠加其他效果，并导出为 MP4/WebM/GIF。下面一步步讲清楚怎么用。
3D 翻转在 KinoViz 里其实是两个功能
先把概念理清楚，不然很容易混淆。
第一个是「3D Rotate」模块：在属性面板里手动调整，可以精确控制某一帧翻到多少度、什么时候开始翻、翻多快，适合需要细致控制节奏的场景。
第二个是「3D Flip」动画预设：在动画预设列表里一键应用，就能得到一整套翻转动画，包括那种「头部先转、尾部慢半拍跟上」的挥鞭甩动质感，适合快速出效果、不想逐项调参数的场景。
两者都需要 Pro 计划（Studio 计划同样包含），免费和入门计划暂不支持。下面分别讲怎么用。
手动挡：用 3D Rotate 模块精细控制翻转
入口很简单：选中画布上的元素，打开右侧属性面板，找到 Effects 效果区，展开 3D Rotate 模块。里面有三个滑块：
- Rotate Y（0°–360°）：左右翻转，也就是最经典的「卡片翻面」效果。翻到 90° 或 270° 时，元素会侧过去变成一条线（因为你正对着它的边缘）；翻到 180° 会看到镜像的「背面」；翻满 360° 就是转一整圈回到原位。
- Rotate X（0°–360°）：上下翻转，效果像日历翻页——顶边或底边往里收，元素绕水平轴翻过去。
- Twist：范围为 -180° 到 180°，让扭曲量沿着翻转轴逐渐变化。简单说，就是把一次平整的翻转「拧」成麻花状或螺旋状，做扭曲变形效果时很有用。
有个细节值得注意：翻转轴心会跟着这个元素的锚点（pivot）走。如果你把锚点挪到偏一侧的位置，翻转就不会绕正中心转，而是绕你设置的那个点转——想做「从一角掀起来」的效果，调整锚点就行，不用额外搭结构。
一个最简单的翻牌卡片怎么做
- 选中要做翻转的图片或文字元素，打开 3D Rotate 模块。
- 在时间轴上添加第一个关键帧，将 Rotate Y 设为 0°。
- 往后拖一段时间，再添加一个关键帧，将 Rotate Y 设为 180°——播放时，元素就会从正面翻到背面。
- 如果想让它转完一整圈回到正面（比如 logo 登场动画），把结束帧的 Rotate Y 设为 360° 而不是 180° 即可；再配一个弹性缓动，会更有分量感。
这套操作和制作其他关键帧动画的逻辑一样，唯一区别是这次动的是一个「3D 属性」，而不是位置或透明度。
一键挡：3D Flip 动画预设，自带挥鞭效果
如果不想自己一帧帧调整，直接在动画预设列表里选择 3D Flip，会更快出效果。它开放的参数包括：
- Flip Axis 翻转轴：选择左右翻转还是上下翻转。
- Spin 角度：范围为 90°–1080°（默认 360°），也就是一次动画里总共旋转多少度；超过 360° 就是连续转好几圈。
- Twist 挥鞭强度：一个开关加一个数值滑块（默认 90）。打开后，翻转不再是匀速的整体旋转，而是元素的头部先转、尾部略微滞后跟进；速度较快时，会甩出一个 S 形姿态——这就是很多产品视频里那种带「甩劲儿」的翻转手感，而不是死板的匀速转盘。
这个预设同样支持视频元素，不只是静态图片或文字——也就是说，一段视频素材本身也能套上这种带挥鞭感的 3D 翻转入场。
支持哪些元素，群组要怎么处理
文字、图形、图片、视频、路径这些常规元素，都可以直接添加 3D 翻转。群组、Component（自定义组件）、布尔运算组、遮罩组这几类「容器」整体不支持直接翻转——这是有意设置的限制，因为容器内部通常是多层叠加的复杂结构，整体做 3D 投影容易产生视觉上不合理的穿插。
好在这不是死路：你完全可以进入容器内部，对里面的每一个子元素分别添加 3D 翻转，效果照样能做出来，只是多一步操作。
能和其他效果叠加吗
可以。3D 翻转是独立实现的变换效果，设计上就支持和模糊（Layer Blur）、光晕（Glow）、半调网点（Halftone）、ASCII 字符画等效果自由组合——编辑器里看到的叠加效果，在导出的视频里也会保持一致。
如实说明两个目前已知的边界情况，免得你踩坑：一是如果同时使用「残影」（Motion Trail，让元素拖出一串淡出的重影副本）效果，翻转贴近边缘的部分或光晕在残影副本里可能会被裁掉一点，这是残影副本按包围盒截取导致的；二是液态玻璃、磨砂玻璃这类材质叠加背景模糊时，视觉上可能会和翻转的立体形态对不齐。这两种都是相对小众的叠加场景，单独使用 3D 翻转不会遇到。
用 AI 直接说出来也行
如果懒得自己翻属性面板，也可以直接在 KinoViz 里对 AI 说一句「做一张 3D 翻转的卡片」。它会理解你的意图，帮你把 Rotate Y（或 Rotate X）和 Twist 调好，也能顺手添加关键帧，做出旋转入场的效果。不过要注意，AI 目前是直接调整这几个基础属性；那种自带挥鞭甩动感的 3D Flip 一键预设本身，还没有接入 AI 的自动调用。想要那种甩尾巴的质感，目前仍需要到动画预设面板里手动选择，并调整 Twist 挥鞭强度。这个差异不影响 AI 帮你快速搭出一个可用的翻转效果，只是精调挥鞭手感这一步暂时还要自己完成。
网页 3D 翻转，KinoViz 和纯代码有什么不同
用 CSS 做 3D 翻转当然可行，transform-style: preserve-3d、perspective、backface-visibility 这套组合很多前端都写过。但代码方式有个绕不开的成本：每次想微调翻转的节奏、角度，或加一点挥鞭手感，都要回去改代码、刷新页面看效果，很难做到「边看边调」；如果还想让翻转和光晕、模糊等效果精确联动，代码量会进一步增加。
KinoViz 的思路，是把这套变换做成可视化滑块和时间轴关键帧，改完立刻在画布上看到结果，调完就能直接导出视频或 GIF，不用再走一遍渲染管线。两种方式各有适用场景——如果你的翻转效果本来就要嵌进正在开发的网页组件里，写 CSS 可能更顺手；如果你要做的是一段独立的动画素材（产品视频、社媒动图、落地页 hero 视频），可视化编辑通常会快很多。
能用来做什么
下面是几个比较常见的落地场景，供你参考：
- 产品卡片翻面：正面放产品图，翻过去露出价格、参数或购买按钮，常见于电商详情页动图。
- logo 旋转入场：品牌 logo 用 Rotate Y 从 0° 转到 360°，配合缓动做视频开场。
- 数字翻牌：价格、计数器一类的数字，用整圈或半圈翻转做切换动效，比直接切换更有质感。
- 社媒动图点睛：在一段静态构图里给关键元素加一次 3D Flip 预设，作为视频里的一个「高光时刻」。
常见问题
3D 翻转是免费功能吗？
不是。3D Rotate 模块和 3D Flip 预设都需要 Pro 计划；Studio 计划同样可用。你可以在 定价页 查看各计划包含的具体功能。
可以只翻转一半角度吗？
可以。Rotate Y / Rotate X 都是连续的 0°–360° 滑块，并不只限于 90°、180°、270°、360° 这些固定角度；想翻转多少度都可以自行设置。
导出视频里的翻转效果和编辑器里看到的一样吗？
一样。3D 翻转在编辑器预览和最终导出（MP4/WebM/GIF）中使用同一套渲染逻辑。
群组整体能翻转吗？
群组、Component、布尔运算组、遮罩组这几类容器暂不支持整体翻转。需要进入容器内部，对每个子元素分别设置。
如果想直接上手试试，打开 KinoViz Studio 拖入一个图片或文字元素，在 Effects 里找到 3D Rotate，拖动两下滑块，你会比看十段文字教程更快明白这个效果到底是怎么回事。
