How to Create 3D Flip Card Animations in KinoViz: A Complete 3D Flip Tutorial
A product card flips over to reveal the price, a logo spins into the scene with dimensionality, or numbers switch with the crisp snap of an old flip clock—these are all 3D flip effects. They have also become one of the most common motion styles in short-video covers, landing page heroes, and social media GIFs over the past couple of years.
The effect looks great, but making it yourself can be tricky. Many people get stuck in one of two places: either they write CSS 3D transforms and keep tweaking perspective and backface-visibility, or they try a traditional video editor and realize it does not really have a clear concept of rotation in 3D space, so they end up faking it with position and scale.
This tutorial covers another approach. In KinoViz, 3D flipping is a visual effect module: you can drag sliders and preview the result in real time, add keyframes to animate it, combine it with other effects, and export it as MP4, WebM, or GIF. Let’s walk through how it works.
3D 翻转在 KinoViz 里其实是两个功能
Let’s clarify the concepts first, because the two options are easy to mix up.
The first is the 3D Rotate module: you adjust it manually in the properties panel. It lets you precisely control how many degrees an element rotates on a given frame, when the flip starts, and how fast it moves. This is best when you need fine control over timing and rhythm.
The second is the 3D Flip animation preset: you apply it from the animation preset list with one click, and it gives you a complete flip animation, including that whip-like motion where the front of the element turns first and the tail follows a split second later. This is ideal when you want a quick result without tuning every parameter yourself.
Both require the Pro plan, and they are also included in the Studio plan. The free and entry-level plans do not currently support them. Below, we’ll cover both workflows.
手动挡：用 3D Rotate 模块精细控制翻转
The entry point is simple: select an element on the canvas, open the properties panel on the right, find the Effects section, and expand the 3D Rotate module. It contains three sliders:
- Rotate Y (0°–360°): flips left to right, which is the classic card-flip effect. At 90° or 270°, the element turns sideways and becomes a thin line because you are looking straight at its edge. At 180°, you see the mirrored “back” side. At 360°, it completes a full rotation and returns to its original orientation.
- Rotate X (0°–360°): flips up and down, similar to a calendar page turning. The top or bottom edge folds inward as the element rotates around the horizontal axis.
- Twist: ranges from -180° to 180°. It gradually changes the amount of distortion along the flip axis. In simple terms, it turns a flat flip into a twisted, spiral-like motion, which is useful for deformation effects.
One detail is worth noting: the flip axis follows the element’s pivot. If you move the pivot off to one side, the element will no longer rotate around its exact center; it will rotate around the point you set. If you want an effect where the element lifts from one corner, just adjust the pivot—no extra structure is needed.
一个最简单的翻牌卡片怎么做
- Select the image or text element you want to flip, then open the 3D Rotate module.
- Add the first keyframe on the timeline and set Rotate Y to 0°.
- Move forward in time, add another keyframe, and set Rotate Y to 180°. When played back, the element will flip from the front to the back.
- If you want it to complete a full turn and return to the front, such as for a logo reveal, set the final Rotate Y value to 360° instead of 180°. Add an elastic easing curve to give it more weight.
The logic is the same as creating any keyframe animation. The only difference is that this time you are animating a 3D property rather than position or opacity.
一键挡：3D Flip 动画预设，自带挥鞭效果
If you do not want to adjust the motion frame by frame, choose 3D Flip directly from the animation preset list for a faster result. It exposes these parameters:
- Flip Axis: choose whether the element flips horizontally or vertically.
- Spin: ranges from 90° to 1080° (default 360°), meaning the total number of degrees the element rotates during the animation. Anything above 360° creates multiple spins.
- Twist: a toggle plus a numeric slider (default 90). When enabled, the flip is no longer a uniform rotation of the whole element. Instead, the leading part turns first while the trailing part follows slightly behind. At higher speeds, it creates an S-shaped posture—the same snappy, whip-like feel often seen in product videos, rather than a stiff, constant-speed turntable.
This preset also supports video elements, not just static images or text. In other words, a video clip itself can enter with this whip-like 3D flip motion.
支持哪些元素，群组要怎么处理
Standard elements such as text, shapes, images, videos, and paths can all use 3D flip directly. Containers such as groups, Components (custom components), boolean operation groups, and mask groups cannot be flipped as a whole. This is an intentional limitation: containers often contain complex multi-layer structures, and applying a 3D projection to the entire container can create visually confusing intersections.
Fortunately, this is not a dead end. You can enter the container and apply 3D flip to each child element individually. The result can still be achieved; it just takes one extra step.
能和其他效果叠加吗
Yes. 3D flip is implemented as an independent transform effect, and it is designed to combine freely with effects such as Layer Blur, Glow, Halftone, and ASCII art. The combined effect you see in the editor will remain consistent in the exported video.
To be transparent, there are two known edge cases worth mentioning. First, if you use Motion Trail at the same time, which creates a series of fading duplicate afterimages, parts of the flip near the edge or parts of the Glow may be slightly clipped in the trail copies. This is caused by the trail copies being cropped according to their bounding boxes. Second, when materials such as liquid glass or frosted glass are combined with background blur, the visual result may not align perfectly with the 3D shape of the flip. These are relatively niche combinations; you will not run into them when using 3D flip on its own.
用 AI 直接说出来也行
If you do not feel like digging through the properties panel, you can simply tell the AI in KinoViz something like “make a 3D flipping card.” It will understand your intent, adjust Rotate Y (or Rotate X) and Twist for you, and can also add keyframes to create a rotating entrance effect. One thing to note: at the moment, the AI directly adjusts these base properties. The one-click 3D Flip preset with the built-in whip-like motion has not yet been connected to AI automatic invocation. If you want that trailing whip feel, you still need to select it manually in the animation preset panel and adjust the Twist strength yourself. This does not prevent the AI from quickly building a usable flip effect; it only means the final whip-style refinement is still a manual step for now.
网页 3D 翻转，KinoViz 和纯代码有什么不同
Creating a 3D flip with CSS is certainly possible. Many front-end developers have written the familiar combination of transform-style: preserve-3d, perspective, and backface-visibility. But the code-based approach has an unavoidable cost: every time you want to fine-tune the timing, angle, or add a bit of whip-like motion, you need to go back to the code, make changes, and refresh the page to see the result. It is hard to adjust while watching. If you also want the flip to coordinate precisely with Glow, blur, and other effects, the amount of code increases further.
KinoViz turns this transformation workflow into visual sliders and timeline keyframes. After each adjustment, you can immediately see the result on the canvas, then export the finished animation directly as a video or GIF without going through another rendering pipeline. Both approaches have their place. If the flip effect needs to be embedded into a web component that is already under development, CSS may be more convenient. If you are making a standalone animation asset, such as a product video, social media GIF, or landing page hero video, visual editing is usually much faster.
能用来做什么
Here are a few common practical use cases for reference:
- Product card flip: place the product image on the front, then flip to reveal the price, specs, or purchase button. This is common in e-commerce detail page GIFs.
- Logo rotating entrance: animate a brand logo from 0° to 360° with Rotate Y, and pair it with easing for a video intro.
- Number flip: use a full or half rotation to switch prices, counters, or other numeric content. It feels more polished than a direct cut.
- Social media motion highlight: add a 3D Flip preset to a key element in an otherwise static composition to create a visual highlight moment in the video.
FAQ
Is 3D Flip a free feature?
No. The 3D Rotate module and 3D Flip presets require the Pro plan; they are also available on the Studio plan. You can check the specific features included in each plan at 定价页.
Can I flip by only part of an angle?
Yes. Rotate Y / Rotate X use continuous 0°–360° sliders, so you are not limited to fixed angles like 90°, 180°, 270°, or 360°. You can set any rotation angle you need.
Will the flip effect in the exported video match what I see in the editor?
Yes. 3D Flip uses the same rendering logic in the editor preview and in the final export (MP4/WebM/GIF).
Can I flip an entire group?
Groups, Components, boolean operation groups, and mask groups cannot currently be flipped as a whole. You need to enter the container and apply the settings to each child element individually.
If you want to try it right away, open KinoViz Studio, drag in an image or text element, find 3D Rotate under Effects, and move the sliders a couple of times. You will understand how the effect works faster than by reading ten text tutorials.
