Transform
transform-origin
transform-origin sets the point that rotation and scaling happen around. The initial value is the center of the element.
Syntax
[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] <length>? | [ [ center | left | right ] && [ center | top | bottom ] ] <length>?Preview
Code
.box {
background: linear-gradient(
135deg,
#88d1c7,
#77a7d7,
#eaac3a
);
border-radius: 8px 32px;
transform: rotate(30deg) scale(0.6);
transform-origin: left top;
}Controls
Click or drag inside the box to move the center
About
Values
Write the horizontal and then the vertical position (transform-origin: left top). Keywords (left, center, right, top, bottom), lengths and percentages work. Percentages are relative to the element's own width and height, so 0 0 is the top left corner and 100% 100% the bottom right. The initial value is 50% 50% (the center).
- With one value, the other one is
center.topalone is the middle of the top edge. - Two keywords can go in either order, so
top leftworks too. - A point outside the box works too, as in
150%.
A third value for depth (z) is allowed too, but it makes no visible difference unless combined with 3D transforms. The controls on this page don't cover it, but you can type it into the code.
What it is the center of
It is the center for rotate, scale and the rotate(), scale() and skew() functions of transform. That point stays where it is while the rest of the element turns around it or shrinks toward it. It has no effect on translate, which only moves the element.
The preview on this page writes transform: rotate(30deg) scale(0.6) as a helper declaration. The dashed outline is the original position, and only the point chosen with transform-origin stays in its original place.