About

This tool generates the complex CSS required to create hardware-accelerated 3D flip animations. Unlike simple 2D transitions, 3D flips require a precise combination of perspective, transform-style, and backface-visibility to function correctly across browsers.

The core mechanic relies on rotating a container 180 degrees (180°) along an axis. To create the illusion of depth, we define a perspective value, typically between 600px and 1200px. This value represents the distance of the viewer's eye from the z=0 plane. Lower values create a more dramatic, "fisheye" 3D effect, while higher values appear flatter.

We solve the "flicker" problem often seen in older implementations by strictly enforcing preserve-3d on the inner container and hiding the backface of the card faces. This ensures that when the card rotates x > 90°, the browser rendering engine correctly culls the front face.

Formulas

The rotation transformation matrix R_y for a horizontal flip (θ) is calculated by the browser rendering engine as:

cosθ0sinθ010-sinθ0cosθ

When θ = 180°, the visual output is inverted along the Z-axis relative to the viewer's perspective origin.

Reference Data

Property	Value Type	Function
perspective	px	Determines the depth of the 3D scene. Standard range: 600px - 1200px.
transform-style	preserve-3d	Tells the browser that children of the element should be positioned in 3D space, not flattened.
backface-visibility	hidden	Hides the rear side of a generic element, crucial for the "card" effect.
rotateY	deg	Rotates the element around the vertical Y-axis (Horizontal flip).
rotateX	deg	Rotates the element around the horizontal X-axis (Vertical flip).
transition	ms / s	Defines the interpolation curve (e.g., cubic-bezier) and duration of the flip.

Frequently Asked Questions

Blurry text during 3D transforms is usually caused by sub-pixel rendering. This tool mitigates it by suggesting hardware-accelerated properties, but ensuring the card dimensions are even numbers (e.g., 300px, not 300.5px) often fixes the issue.

Yes. CSS 3D transforms are fully supported on modern iOS and Android browsers. For the "Hover" trigger, mobile devices often interpret a "tap" as a hover state, but using the "Click" trigger is recommended for better mobile UX.

A value of 1000px is the industry standard for a realistic look. Values below 500px create extreme distortion, while values above 2000px look nearly isometric (flat).

Yes. The generated code creates a container. You can place forms, images, or videos inside the `.flip-card-front` and `.flip-card-back` divs without breaking the animation.