Rotation

Rotate an element by a supported degree value or arbitrary angle.

Turn an element by a clockwise or counterclockwise angle. Rotation uses the CSS rotate property, so it composes independently with the x and y translate utilities.

Quick reference

Example class	Expected declarations
`rotate-12`	`rotate: 12deg;`

Example setup

Every preview explicitly uses spec: 1, reset: "none", strict mode, spacingUnit: "0.25rem", no breakpoints, and defaultTransitionTimingFunction: "ease". The first diagram applies translate-x-8, translate-y-4, and rotate-12 together; the second compares a negative degree value with an arbitrary turn value. The diagram styles only draw and place the pieces.

Examples in use

Rotate and translate one element

rotate-12 composes with translate-x-8 and translate-y-4 through independent CSS properties; no transform utility is required.

Rotate and translate one element

HTML

<figure class="wind-demo-figure"><div class="wind-demo-stage" aria-hidden="true"><span class="wind-demo-origin">start</span><span class="wind-demo-piece translate-x-8 translate-y-4 rotate-12">12°</span></div><figcaption class="wind-demo-caption">Independent translate-x, translate-y, and rotate utilities compose on one element without a transform utility.</figcaption></figure>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
@property --zw-translate-x {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
@property --zw-translate-y {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
.wind-demo-figure {
  margin: 0;
  color: #24364b;
  font: 14px / 1.5 system-ui, sans-serif;
}

.wind-demo-stage {
  position: relative;
  width: min(20rem, 100%);
  height: 10rem;
  border: 1px solid #a7bacd;
  background: linear-gradient(90deg, #f7f9fc 1px, #0000 1px), linear-gradient(#f7f9fc 1px, #0000 1px);
  background-size: 1rem 1rem;
}

.wind-demo-origin, .wind-demo-piece {
  position: absolute;
  left: 5rem;
  top: 3rem;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
}

.wind-demo-origin {
  border: 1px dashed #54708b;
  background: #e5edf5;
  color: #38516b;
  font-size: .7rem;
}

.wind-demo-piece {
  border: 1px solid #22598e;
  background: #a8d0f4;
  color: #153c60;
  font-weight: 650;
}

.wind-demo-caption {
  display: block;
  margin-top: .5rem;
}
.translate-x-8 {
  --zw-translate-x: 2rem;
  translate: var(--zw-translate-x) var(--zw-translate-y);
}
.translate-y-4 {
  --zw-translate-y: 1rem;
  translate: var(--zw-translate-x) var(--zw-translate-y);
}
.rotate-12 {
  rotate: 12deg;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-figure": true,
      "wind-demo-stage": true,
      "wind-demo-origin": true,
      "wind-demo-piece": true,
      "wind-demo-caption": true
    },
    "safelist": {
      "docs-preview": [
        "translate-x-8",
        "translate-y-4",
        "rotate-12"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo-figure { margin: 0; color: #24364b; font: 14px/1.5 system-ui, sans-serif; }
.wind-demo-stage { position: relative; width: min(20rem, 100%); height: 10rem; border: 1px solid #a7bacd; background: linear-gradient(90deg, #f7f9fc 1px, transparent 1px), linear-gradient(#f7f9fc 1px, transparent 1px); background-size: 1rem 1rem; }
.wind-demo-origin, .wind-demo-piece { position: absolute; left: 5rem; top: 3rem; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; }
.wind-demo-origin { border: 1px dashed #54708b; background: #e5edf5; color: #38516b; font-size: 0.7rem; }
.wind-demo-piece { border: 1px solid #22598e; background: #a8d0f4; color: #153c60; font-weight: 650; }
.wind-demo-caption { display: block; margin-top: 0.5rem; }

Use negative and arbitrary angles

-rotate-45 turns counterclockwise; rotate-[0.125turn] uses an arbitrary one-eighth turn.

Use negative and arbitrary angles

HTML

<figure class="wind-demo-figure"><div class="wind-demo-stage" aria-hidden="true"><span class="wind-demo-piece -rotate-45">−45°</span><span class="wind-demo-piece wind-demo-piece-alt rotate-[0.125turn]">⅛ turn</span></div><figcaption class="wind-demo-caption">A negative class turns the other way; an arbitrary CSS angle can use turns or radians.</figcaption></figure>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-figure {
  margin: 0;
  color: #24364b;
  font: 14px / 1.5 system-ui, sans-serif;
}

.wind-demo-stage {
  position: relative;
  width: min(20rem, 100%);
  height: 10rem;
  border: 1px solid #a7bacd;
  background: linear-gradient(90deg, #f7f9fc 1px, #0000 1px), linear-gradient(#f7f9fc 1px, #0000 1px);
  background-size: 1rem 1rem;
}

.wind-demo-piece, .wind-demo-piece-alt {
  position: absolute;
  left: 5rem;
  top: 3rem;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
}

.wind-demo-piece {
  border: 1px solid #22598e;
  background: #a8d0f4;
  color: #153c60;
  font-weight: 650;
}

.wind-demo-caption {
  display: block;
  margin-top: .5rem;
}

.wind-demo-piece-alt {
  left: 11rem;
}
.-rotate-45 {
  rotate: -45deg;
}
.rotate-\[0\.125turn\] {
  rotate: 0.125turn;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-caption": true,
      "wind-demo-figure": true,
      "wind-demo-piece": true,
      "wind-demo-piece-alt": true,
      "wind-demo-stage": true
    },
    "safelist": {
      "docs-preview": [
        "-rotate-45",
        "rotate-[0.125turn]"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo-figure { margin: 0; color: #24364b; font: 14px/1.5 system-ui, sans-serif; }
.wind-demo-stage { position: relative; width: min(20rem, 100%); height: 10rem; border: 1px solid #a7bacd; background: linear-gradient(90deg, #f7f9fc 1px, transparent 1px), linear-gradient(#f7f9fc 1px, transparent 1px); background-size: 1rem 1rem; }
.wind-demo-piece, .wind-demo-piece-alt { position: absolute; left: 5rem; top: 3rem; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; }
.wind-demo-piece { border: 1px solid #22598e; background: #a8d0f4; color: #153c60; font-weight: 650; }
.wind-demo-caption { display: block; margin-top: 0.5rem; }
.wind-demo-piece-alt { left: 11rem; }

Custom and named values

Integer values from 0 through 360 are interpreted as degrees. Prefix a supported integer with a minus sign to rotate counterclockwise. An arbitrary CSS angle can use deg, rad, grad, or turn, for example rotate-[0.125turn]. There is no named rotation scale. The v1 catalog does not include transform, scale, skew, or GPU transform utilities.

Related guides: Utility grammar · Variants

Catalog details

rotate

Field	Value
Catalog identifier	`v1.rotate`
Class pattern	`rotate-<suffix>`
Grammar	`{"acceptedKinds":["integer","arbitrary"],"arbitraryProperty":"rotate","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	The catalog has no separate accepted-value records for this entry.
Token categories	No token category
Negative-value policy	`allowed`
Conflict group and rank	`rotate` (`39`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`rotate`

Accepted values

The catalog has no separate accepted-value records for this entry.

Declaration templates

Property	Value kind	Fixed value
`rotate`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`rotate-90`	`rotate: 90deg`

Rotation

Quick reference

Examples in use

Rotate and translate one element

Use negative and arbitrary angles

Custom and named values

rotate

Accepted values

Declaration templates

Catalog examples

Revision History