Transform origin

Syntax

Class
Properties
origin-{xKeyword}
transform-origin: {xKeyword};
origin-{yKeyword}
transform-origin: {yKeyword};
origin-{yKeyword}-{xKeyword}
transform-origin: {yKeyword} {xKeyword};
origin-{xKeyword}-{yKeyword}
transform-origin: {xKeyword} {yKeyword};
origin-{x}-{y}
transform-origin: {x} {y};

Parameters

xKeyword
left | center | right
yKeyword
top | center | bottom
x
<length-percentage default-unit=1px>
x
left | center | right
y
<length-percentage default-unit=1px>
y
top | center | bottom
<div class="t1 mt-16 w-96 h-40 flex flex-center bg-c-white rounded-3 color-blue b-2-blue shadow-8 cursor-pointer select-none transform-none">Button</div> <div class="t1 fixed top-0 bottom-0 w-96 h-full bx-1-dashed-black-30"></div> <div class="t1 fixed left-0 right-0 top-40 w-full h-40 by-1-dashed-black-30"></div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Origin: top
t1 origin-top
.t1.origin-top { transform-origin: top; }
Origin: bottom
t1 origin-bottom
.t1.origin-bottom { transform-origin: bottom; }
Origin: left
t1 origin-left
.t1.origin-left { transform-origin: left; }
Origin: right
t1 origin-right
.t1.origin-right { transform-origin: right; }
Origin: center
t1 origin-center
.t1.origin-center { transform-origin: center; }
Origin: top left
t1 origin-top-left
.t1.origin-top-left { transform-origin: top left; }
Origin: top center
t1 origin-top-center
.t1.origin-top-center { transform-origin: top center; }
Origin: top right
t1 origin-top-right
.t1.origin-top-right { transform-origin: top right; }
Origin: center left
t1 origin-center-left
.t1.origin-center-left { transform-origin: center left; }
Origin: center center
t1 origin-center-center
.t1.origin-center-center { transform-origin: center center; }
Origin: center right
t1 origin-center-right
.t1.origin-center-right { transform-origin: center right; }
Origin: bottom left
t1 origin-bottom-left
.t1.origin-bottom-left { transform-origin: bottom left; }
Origin: bottom center
t1 origin-bottom-center
.t1.origin-bottom-center { transform-origin: bottom center; }
Origin: bottom right
t1 origin-bottom-right
.t1.origin-bottom-right { transform-origin: bottom right; }
Origin: 10px 20px provided as unitless numbers
t1 origin-10-20
.t1.origin-10-20 { transform-origin: 10px 20px; }
Origin: 10px 20px provided as length values
t1 origin-10px-20px
.t1.origin-10px-20px { transform-origin: 10px 20px; }
Origin: 10% 20%
t1 origin-10%-20%
.t1.origin-10\%-20\% { transform-origin: 10% 20%; }