Transforms

Composable transform utilities for scaling, rotating, translating, and skewing elements. Transform classes can be combined on the same element, and Maple automatically assembles them into one transform value.

Transform Utilities

Use the utility that matches the transform function you need. One-value utilities apply to the natural axis or function, while two-value utilities use underscores to separate X and Y values.

Scale

The scale-* utility resizes an element without changing document flow. Use decimal values for proportional scaling, negative values for flips, and two values when X and Y should be scaled differently.

<!-- Uniform scale -->
<div class="scale-1"><!-- No scale --></div>
<div class="scale-0.5"><!-- 0.5x scale --></div>
<div class="scale-1.15"><!-- 1.25x scale --></div>

<!-- Negative scale flips the element -->
<div class="-scale-1"><!-- Flip X & Y --></div>
<div class="-scalex-1"><!-- Flip horizontally --></div>
<div class="-scaley-1"><!-- Flip vertically --></div>

<!-- Two-axis scale -->
<div class="scale-1.15_0.8"><!-- X: 1.15, Y: 0.8 --></div>
<div class="scale-1_-1"><!-- X: 1, Y: -1 --></div>

<!-- Literal CSS value -->
<div class="scale=1.2"></div>

Rotate

The rot-* utility rotates an element. Numeric values resolve as degrees, and explicit CSS angle units like turn and rad can be used when the unit matters.

<!-- Numeric values resolve as degrees -->
<div class="rot-45"><!-- 45deg --></div>
<div class="-rot-90"><!-- -90deg --></div>

<!-- Explicit CSS angle units -->
<div class="rot-0.5turn"><!-- Half turn --></div>
<div class="rot-3.14rad"><!-- Radians --></div>

Translate

The tl-* utility moves an element from its rendered position. Numbers use Maple's spacing scale, percentages are passed through as CSS percentages, and two-axis values use an underscore.

<!-- Spacing-based translate -->
<div class="tl-4"><!-- Move by 1rem --></div>
<div class="-tl-8"><!-- Move by -2rem --></div>

<!-- Percentage translate -->
<div class="tl-%"><!-- Move 100% --></div>
<div class="-tl-%"><!-- Move -100% --></div>

<!-- Two-axis translate -->
<div class="tl-4_8"><!-- X: 1rem, Y: 2rem --></div>
<div class="tl-50%_-50%"><!-- X: 50%, Y: -50% --></div>
<div class="tl-1/2_1/4"><!-- X: 50%, Y: 25% --></div>

Skew

The skew-* utility slants an element along one or two axes. Numeric values resolve as degrees, matching the angle units.

<!-- One-axis skew -->
<div class="skew-8"><!-- 8deg --></div>

<!-- Two-axis skew -->
<div class="skew-10_20"><!-- X: 10deg, Y: 20deg --></div>
<div class="skew-10_-10"><!-- X: 10deg, Y: -10deg --></div>

Axis and 3D Variants

Axis-specific utilities target a single transform function directly. Use them when only one axis should change, or when a 3D transform needs to be explicit.

Transform Origin

Use tfo-* to control the point an element transforms around. This is especially useful for rotations, reveals, hinged motion, and controls that should feel anchored to one edge.

<!-- Keyword origins -->
<div class="tfo-center rot-12"></div>
<div class="tfo-left_top rot-12"></div>
<div class="tfo-right_bottom rot-12"></div>

<!-- Literal CSS origin -->
<div class="tfo=25%_75% rot-12"></div>

Combining Transforms

Combine transform classes for realistic interface motion. Pair them with transition utilities when the transform changes between states.

<button class="
  ts-tf_250_ease-out wc-tf
  &:hover:scale-1.05 &:hover:-tl-1 &:hover:rot-1
">
  Lift on hover
</button>

<button class="
  tfo-left_center ts-tf_300_ease-out wc-tf
  &:hover:scale-1.02 &:hover:skew-3 &:hover:tl-2_0
">
  Anchored motion
</button>

Direct Transform Values

Use an equal sign when you want to write a literal CSS value. This is useful for custom transform functions, one-off origins, or advanced 3D settings that are clearer as raw CSS.

Related Properties

Refer to the underlying CSS properties for granular transform control.

Transform

Individual