CORE UTILITY FAMILY

Transforms and perspective

Compose 2D and 3D translation, rotation, scale, skew, transform origin, perspective, backface visibility, hardware acceleration, and zoom.

completeTarget v0.310 verified examplesRegistry JSON ↗

WHEN TO USE IT

Choose the right tool for the layout.

Apply perspective to the parent, preserve 3D on the scene container, transform its children, and use backface visibility intentionally for cards or cubes. Prefer scale over zoom when surrounding layout must remain unaffected.

QUICK REFERENCE

Classes and generated CSS

These examples are resolved by the compiler when the registry manifest is generated. A broken example fails the test suite.

ClassGenerated declarations and keyframes

-co-translate-x-4

--co-translate-x: calc(calc(var(--co-space-unit) * 4) * -1); translate: var(--co-translate-x, 0) var(--co-translate-y, 0) var(--co-translate-z, 0);

co-translate-z-8

--co-translate-z: calc(var(--co-space-unit) * 8); translate: var(--co-translate-x, 0) var(--co-translate-y, 0) var(--co-translate-z, 0);

co-rotate-y-45

--co-rotate-y: rotateY(45deg); transform: var(--co-rotate-x, rotateX(0)) var(--co-rotate-y, rotateY(0)) var(--co-rotate-z, rotateZ(0)) var(--co-skew-x, skewX(0)) var(--co-skew-y, skewY(0));

co-scale-95--co-scale-x: 95%; --co-scale-y: 95%; scale: var(--co-scale-x, 100%) var(--co-scale-y, 100%);

co-skew-x-6

--co-skew-x: skewX(6deg); transform: var(--co-rotate-x, rotateX(0)) var(--co-rotate-y, rotateY(0)) var(--co-rotate-z, rotateZ(0)) var(--co-skew-x, skewX(0)) var(--co-skew-y, skewY(0));

co-transform-3dtransform-style: preserve-3d;

co-perspective-normalperspective: var(--co-perspective-normal);

co-perspective-origin-topperspective-origin: top;

co-backface-hiddenbackface-visibility: hidden;

co-zoom-110zoom: 110%;

VISUAL EXAMPLE · TRANSLATE

Move an element without changing document flow

Translation changes the rendered position while the element keeps its original layout space. Axis utilities can be combined and negative values move in the opposite direction.

ORIGINAL

TRANSFORMED

MOVED

component.coord

<div class="co-translate-x-8 co-translate-y-4">
  Moved
</div>

<div class="-co-translate-x-4">Moved left</div>

VISUAL EXAMPLE · ROTATE

Rotate in two or three dimensions

Use the standard rotate utility for the Z axis. Axis-specific rotation becomes visibly three-dimensional when its parent supplies perspective.

ORIGINAL

0°

TRANSFORMED

Y · 45°

component.coord

<div class="co-rotate-6">Tilted card</div>

<div class="co-perspective-normal">
  <div class="co-rotate-y-45">3D card</div>
</div>

VISUAL EXAMPLE · SCALE

Resize visually around an origin

Scale affects visual size without recalculating surrounding layout. It is useful for hover feedback, selected states, and subtle emphasis.

SCALE 75

SCALE 95

SCALE 110

component.coord

<button class="co-scale-95 hover:co-scale-100 co-transition-transform">
  Continue
</button>

VISUAL EXAMPLE · SKEW

Slant an element along either axis

Skew creates an angled surface while preserving the element's layout footprint. Keep text readable by skewing a wrapper and counter-skewing its content when needed.

ORIGINAL

STRAIGHT

TRANSFORMED

SKEW X

component.coord

<div class="co-skew-x-6">
  <span class="-co-skew-x-6">Readable label</span>
</div>

VISUAL EXAMPLE · TRANSFORM ORIGIN

Control where a transform begins

The origin acts like a hinge. The same rotation produces different motion when anchored to the center, top-left, or bottom-right.

TOP LEFT

CENTER

BOTTOM RIGHT

component.coord

<div class="co-origin-top-left co-rotate-12">Top-left hinge</div>
<div class="co-origin-center co-rotate-12">Center hinge</div>

VISUAL EXAMPLE · PERSPECTIVE

Choose how strongly depth is perceived

A shorter perspective distance makes depth feel dramatic. A longer distance produces a flatter, more subtle result. Perspective belongs on the scene, not the rotated child.

DRAMATIC

220px

NORMAL

500px

DISTANT

1100px

component.coord

<div class="co-perspective-dramatic">
  <article class="co-rotate-y-45">Near camera</article>
</div>

<div class="co-perspective-distant">
  <article class="co-rotate-y-45">Far camera</article>
</div>

VISUAL EXAMPLE · 3D SCENE

Preserve depth across nested transforms

Use transform-3d on the parent when children need independent Z positions. Without it, nested elements are flattened onto the parent's plane.

BACK · Z −8

FRONT · Z 8

component.coord

<div class="co-perspective-normal">
  <div class="co-transform-3d co-rotate-x-12 co-rotate-y-45">
    <div class="co-translate-z-8">Front layer</div>
    <div class="-co-translate-z-8">Back layer</div>
  </div>
</div>

BASIC USAGE

Apply a utility directly.

Keep the complete class string in your template so the plain-text scanner can discover it without evaluating application code.

component.coord

<div class="-co-translate-x-4 co-translate-z-8 co-rotate-y-45 co-scale-95 co-skew-x-6 co-transform-3d co-perspective-normal co-perspective-origin-top co-backface-hidden co-zoom-110">
  Your content
</div>

HOW IT WORKS

Core concepts

01
Translate values reuse spacing, percentage fractions, px, custom properties, and safe arbitrary values across x, y, and z axes.
02
2D rotate uses the independent rotate property while x/y/z rotations and skew compose through transform-function variables.
03
Scale x and y compose independently and support mirrored negative values.
04
Named perspective tokens range from dramatic to distant and can be extended through --co-perspective-* theme variables.
05
Transform and perspective origins accept nine named positions, custom properties, or arbitrary positions.
06
CPU/GPU, flat/preserve-3d, backface, and zoom utilities provide explicit rendering controls and resets.

CSS PROPERTIES

What this family controls

translaterotatescaletransformtransform-origintransform-styleperspectiveperspective-originbackface-visibilityzoom

VARIANTS

Responsive and state conditions

Prefix any supported utility with responsive or state variants. Variants compose from left to right and the compiler emits the required selector or at-rule.

component.coord

<div class="-co-translate-x-4 md:co-translate-z-8 hover:-co-translate-x-4">
  Responsive and state-aware content
</div>

ARBITRARY VALUES

Escape the scale when necessary

Use square brackets for a one-off CSS value. Prefer theme tokens for values repeated across components so an AI agent and human reviewer can recognize design intent.

Arbitrary syntax

co-transform-*
co-[content-visibility:auto]

NEGATIVE VALUES

Reverse supported values

Place the minus sign before the framework prefix. Only properties where negative CSS values are meaningful accept this modifier.

Canonical negative syntax

-co-{utility}
-co-translate-x-4

SCOPE BOUNDARIES

Intentional boundaries

This family is implemented, documented, and tested. These notes define where a neighboring family or browser behavior takes over.

Translate-z and rotate-x/y/z are only visually meaningful in a preserved 3D scene with perspective applied to an ancestor.
CSS zoom changes the effective layout size and should not replace scale for ordinary animation.
Arbitrary transform functions are emitted as a complete transform value and intentionally replace composed rotate/skew functions.

Previous← Tables and multi-column NextTransitions and animations →