Skip to main content

Transform Control

The Transform control applies CSS transforms to a block. Add one or more transform types to a block and stack them to build up an effect. Transforms are also the building blocks of the Animation System — both Scroll Position and Interaction animations can animate these same values.

Transform Types​

Choose a Transform Type to add:

  • Translate — move the block on the X and Y axes, and on Z (translateZ) to push it toward or away from the viewer in 3D.
  • Scale — scale on X and Y. Use the lock to scale both axes together, or unlock for independent values.
  • Rotate — rotate in the plane (degrees) or in 3D around the X and Y axes.
  • Skew — skew on the X and Y axes.
  • Perspective — set the perspective distance (default 1200px) that gives 3D translate/rotate their sense of depth. A smaller value exaggerates the effect.
Nectarblocks Transform Settings

Transform Origin​

The Transform Origin sets the anchor point that scale, rotate and skew pivot around. Pick from the nine-point preset grid (corners, edges and center) or enter precise X / Y percentages — the default is 50% 50% (center). The chosen origin is reflected in the editor preview so you can see exactly how the block will pivot.

3D & Perspective​

When you use 3D transforms (translateZ, 3D rotation or a Perspective value), Nectarblocks applies preserve-3d automatically so nested 3D transforms compose correctly rather than flattening. Combine a Perspective with a Rotate on the X/Y axes to tilt a card in space, or with translateZ to lift it toward the viewer.

Per-state transforms

Transforms are state-aware — set a different transform for the hover state (and per breakpoint) to create motion on interaction without a full animation trigger.