CSS transform-origin

Transforms happen around a point, the origin. By default it is the center of the element: 50% 50%. transform-origin moves it.

1
2
3
4
5
6
7
8
9
10
11
12
13

<style>
  .row { display: flex; gap: 50px; padding: 30px 40px; }
  .box { width: 80px; height: 80px; background: #d94a00; color: #fff; display: grid; place-items: center; transition: transform .6s; }
  .row:hover .box { transform: rotate(35deg); }
  .center { transform-origin: center; }
  .corner { transform-origin: top left; background: #1a5276; }
  .bottom { transform-origin: bottom center; background: #27ae60; }
</style>
<div class="row">
  <div class="box center">center</div>
  <div class="box corner">top left</div>
  <div class="box bottom">bottom</div>
</div>

Hover over the row. The same 35 degree rotation looks very different with each pivot.

Values

• Keywords: top, bottom, left, right, center. Combine two: top left.
• Lengths: 20px 10px.
• Percentages: 0% 100% is bottom-left.

Common uses

• Rotate like a door: transform-origin: left center.
• Grow from the bottom: a bar chart bar with transform-origin: bottom and scaleY().
• Swing: a hanging sign with the origin at the top.
• Underline growing from the left:

1
2
3
4
5
6

.link::after {
  content: ""; display: block; height: 2px; background: currentcolor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s;
}
.link:hover::after { transform: scaleX(1); }

1
2

.door { transform-origin: left center; transition: transform .4s; }
.door:hover { transform: rotate(-60deg); }