transform-origin position values. Hover over a square to
rotate it 45°
The default position for transform-origin is an element's
center (x,y) = (50%, 50%)..
The %'s are relative to the rendering box (content, border, padding, etc) and represent offsets.
On the horizontal (x-axis), the offset properties left and right have
the values: left: 0%, right: 100%.
On the vertical (y-axis), the offset properties top and bottom have
the values:
top: 0%, bottom: 100%.
If a length (units i.e. px, em, rem, etc.) is used, it
represents the offset from the top, left corner of the rendering box.
Any value assigned to the z-axis (used to give a sense of
depth) must be given in units, as a length, not
percentages.