origin-center/top/left/bottom-right… — the pivot for scale/rotate. This family contains 9 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
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;

Example#

example
html
<div class="origin-bottom-left rotate-12">Pivoted</div>

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • Dropdown pop-ins want origin-top

utilities/transitions/transition-property|Transitions · utilities/animations/keyframes|Animations