Transform

Transform utilities move, scale, rotate, center, and adjust the visual origin of elements without writing custom CSS. They are ideal for hover states, floating cards, dropdown animations, centered overlays, decorative badges, and polished interaction details.

FrontAlign uses a composable transform system powered by CSS variables. Multiple transform utilities can work together through the transform utility.

All transform utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

Usage

Use transform when you want multiple transform utilities to compose cleanly.

<div class="transform scale-105 rotate-3">
  Interactive Card
</div>

How transform works

Transform-related utilities set internal CSS variables. The transform class applies those variables to the final transform property.

<div class="transform scale-110 translate-y-2">
  Content
</div>

transform:
  translate3d(
    var(--fa-translate-x, 0),
    var(--fa-translate-y, 0),
    0
  )
  scale(var(--fa-scale, 1))
  rotate(var(--fa-rotate, 0));

Centered element

Use translate-center when an element already has positioning and should be centered through translation.

<div class="translate-center">
  Centered Element
</div>

Absolute center

Use absolute-center for perfectly centered overlays, loaders, modal content, empty states, and floating controls.

<div class="absolute-center">
  Modal Content
</div>

Scaled content

Scale utilities resize an element visually while preserving the surrounding document flow.

<div class="transform scale-105">
  Enlarged Content
</div>

Vertical offset

Use translate utilities for subtle movement, hover lifts, and floating card effects.

<div class="transform translate-y-4">
  Floating Card
</div>

Horizontal offset

Horizontal translate utilities are useful for decorative offsets, slide-in details, and controlled UI movement.

<div class="transform translate-x-4">
  Offset Element
</div>

Rotated icon

Rotation utilities work well for icons, arrows, badges, and decorative labels.

<i class="transform rotate-90">
  →
</i>

Centering utilities

Scale

Scale utilities resize elements visually. Use smaller values for professional interfaces and larger values only for decorative or explicit emphasis.

Translate Y

Vertical translate utilities move elements up or down through the transform system.

Translate X

Horizontal translate utilities move elements left or right through the transform system.

Rotation

Rotation utilities are useful for icons, badges, decorative UI, disclosure arrows, and playful visual accents.

Subtle rotation

Use subtle rotations for badges, illustrations, stickers, and decorative UI.

<div class="transform rotate-3">
  Badge
</div>

Standard rotation

Transform origin

Transform origin controls the point around which scaling and rotation happen. It is especially useful for dropdown menus, popovers, tooltips, and directional animations.

Menu animation

<div
  class="transform scale-95 origin-top-right"
>
  Dropdown Menu
</div>

Real-world examples

Premium card lift

<div
  class="transform translate-y-2 scale-105"
>
  Feature Card
</div>

Floating action button

<button
  class="transform translate-y-4 shadow-large"
>
  +
</button>

Decorative badge

<div
  class="transform rotate-12"
>
  New
</div>

Centered loader

<div class="absolute-center">
  Loading...
</div>

Rotating icon

<i class="transform rotate-180">
  ↓
</i>

Combining utilities

Scale + translate

<div
  class="transform scale-105 translate-y-2"
>
  Card
</div>

Rotate + scale

<div
  class="transform rotate-3 scale-105"
>
  Sticker
</div>

Translate + rotate

<div
  class="transform translate-x-4 rotate-12"
>
  Decorative Shape
</div>

Choosing the right transform

Usage notes

• Always use transform when combining transform utilities such as scale, translate, and rotate.
• Use small scale values for professional interfaces; scale-105 is usually enough for hover emphasis.
• Reserve large rotations for decorative elements, stickers, badges, and illustrations.
• Use absolute-center for overlays, modals, loaders, hero content, and empty states.
• Prefer subtle translations for hover and motion effects so the interface stays calm and premium.
• Combine transform utilities with shadow, transition-all, hover:, and origin-\* utilities for polished interactive states.