#transform-origin

Defines the origin for transformations defined by the transform property.

默认属性 transform-origin: 50% 50% 0;

The transform origin is in the center of the element.

transform-origin: 20px 70%;

You can use 2 values:

  • the first value is the horizontal axis
  • the second is the vertical axis

transform-origin: top right;

You can use a combination of position keywords: center, top, bottom, left and right.

transform-origin: center bottom;

When using keywords, you can change the order of the axis, as long as each keywords is unambiguous.