FlashFXDocumentation
Ctrl+K
Landing Page
Documentation is work in progress and not completeEditor
GPU Constraints and 3D

3D Transform System

Overview

FlashFX supports pseudo-3D transforms — extending the standard 2D transform system with rotation around the X and Y axes (3D rotation), perspective projection, and Z-depth positioning. This enables:

  • -3D card flip effects
  • -Perspective receding planes
  • -Multi-layer parallax depth
  • -3D text and shape arrangements

FlashFX is not a 3D engine — there is no true 3D scene graph, no polygon meshes, no surface normals for lighting, and no global illumination. All 3D in FlashFX is applied as CSS-style 3D transforms to flat 2D elements.

Enabling 3D on an Element

  1. 1.Select an element
  2. 2.In the Properties Panel, toggle the "3D" switch
  3. 3.Rotation X, Rotation Y, and Z-Position properties appear

3D Transform Properties

Rotation X (Pitch) — Rotation around the horizontal axis. Tilts the element toward or away from the viewer:

  • -Positive values tilt the top away (looking down at the top edge)
  • -Negative values tilt the bottom away (looking up at the bottom edge)

Rotation Y (Yaw) — Rotation around the vertical axis. Rotates the element like a revolving door:

  • -Positive values rotate the right side away
  • -Negative values rotate the left side away

Rotation Z (Roll) — Standard 2D rotation around the depth axis. Identical to the 2D rotation property.

Z Position (Depth) — Moves the element along the Z axis — toward or away from the viewer:

  • -Positive values move closer to the viewer (appears larger with perspective enabled)
  • -Negative values move further from the viewer (appears smaller with perspective)
  • -Without perspective enabled, Z position has no visual effect

Transform Order

3D transforms are applied in this order:

  1. 1.Scale X / Y
  2. 2.Rotation X
  3. 3.Rotation Y
  4. 4.Rotation Z
  5. 5.Z Position
  6. 6.X / Y Position

The order matters significantly for 3D rotation. A rotation of 90 degrees around X followed by 90 degrees around Y produces a different result than the reverse. This is a fundamental property of 3D rotation math, not a FlashFX limitation.

Avoiding gimbal lock:

  • -For continuous multi-axis rotation animations, use short rotation angles per axis (under 90 degrees) to avoid gimbal lock in most cases
  • -For full 360 degree rotations, animate only one axis at a time
  • -For complex multi-axis rotation, use expression-based quaternion rotation when available