Press/to search

Transforms

Transform Origin

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


Class

classcss
origin-centertransform-origin: center
origin-toptransform-origin: top
origin-top-righttransform-origin: top right
origin-righttransform-origin: right
origin-bottom-righttransform-origin: bottom right
origin-bottomtransform-origin: bottom
origin-bottom-lefttransform-origin: bottom left
origin-lefttransform-origin: left
origin-top-lefttransform-origin: top left

Usage

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

Set the element origin to center.

<!-- Example -->
<img class="origin-center ... transform rotate-45 ... h-32 w-24"
src="...">

Set the element origin to top-left.

<!-- Example -->
<img class="origin-top-left ... transform rotate-45 ... h-32 w-24"
src="...">

Set the element origin to bottom-right.

<!-- Example -->
<img class="origin-bottom-right ... transform rotate-45 ... h-32 w-24"
src="...">

Set the element origin to right.

<!-- Example -->
<img class="origin-right ... transform rotate-45 ... h-32 w-24"
src="...">

Set the element origin to bottom-right.

<!-- Example -->
<img class="origin-center ... transform rotate-45 ... h-32 w-24"
src="...">

Set the element origin to bottom-left.

<!-- Example -->
<img class="origin-bottom-left ... transform rotate-45 ... h-32 w-24"
src="...">

Set the element origin to left.

<!-- Example -->
<img class="origin-left ... transform rotate-45 ... h-32 w-24"
src="...">

Set the element origin to top-left.

<!-- Example -->
<img class="origin-top-left ... transform rotate-45 ... h-32 w-24"
src="...">

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.