Transforms

Transform Origin

Utilities for sets the origin of an element's transforms.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
origin-top	transform-origin: top
origin-bottom	transform-origin: bottom
origin-left	transform-origin: left
origin-right	transform-origin: right
origin-center	transform-origin: center
origin-top-left	transform-origin: top left
origin-top-right	transform-origin: top right
origin-bottom-left	transform-origin: bottom left
origin-bottom-right	transform-origin: bottom right

Usage

Set basic transform-origin with Rotate, Skew, and Scale utilities.

Set the element origin to center.

<img class="origin-center ... transform rotate-45 ... height-32 width-24" src="...">

HTML

img {
  @extend
    .origin-center,
    .transform,
    .rotate-45,
    .height-32,
    .width-24;
}

SCSS

Set the element origin to top-left.

<img class="origin-top-left ... transform rotate-45 ... height-32 width-24" src="...">

HTML

img {
  @extend
    .origin-top-left,
    .transform,
    .rotate-45,
    .height-32,
    .width-24;
}

SCSS

Set the element origin to bottom-right.

<img class="origin-bottom-right ... transform rotate-45 ... height-32 width-24" src="...">

HTML

img {
  @extend
    .origin-bottom-right,
    .transform,
    .rotate-45,
    .height-32,
    .width-24;
}

SCSS

Set the element origin to right.

<img class="origin-right ... transform rotate-45 ... height-32 width-24" src="...">

HTML

img {
  @extend
    .origin-right,
    .transform,
    .rotate-45,
    .height-32,
    .width-24;
}

SCSS

Set the element origin to bottom-right.

<img class="origin-center ... transform rotate-45 ... height-32 width-24" src="...">

HTML

img {
  @extend
    .origin-center,
    .transform,
    .rotate-45,
    .height-32,
    .width-24;
}

SCSS

Set the element origin to bottom-left.

<img class="origin-bottom-left ... transform rotate-45 ... height-32 width-24" src="...">

HTML

img {
  @extend
    .origin-bottom-left,
    .transform,
    .rotate-45,
    .height-32,
    .width-24;
}

SCSS

Set the element origin to left.

<img class="origin-left ... transform rotate-45 ... height-32 width-24" src="...">

HTML

img {
  @extend
    .origin-left,
    .transform,
    .rotate-45,
    .height-32,
    .width-24;
}

SCSS

Set the element origin to top-left.

<img class="origin-top-left ... transform rotate-45 ... height-32 width-24" src="...">

HTML

img {
  @extend
    .origin-top-left,
    .transform,
    .rotate-45,
    .height-32,
    .width-24;
}

SCSS