Every element is positioned in a 2D coordinate space, and they each have an origin point. You can move this origin when performing any transformation by using the transform-origin property. The coordinates of this point are based on a regular 2D coordinate system: a vertical Y axis, a horizontal X axis, and an initial transform-origin value of 50% 50 %, which is the center of the element.
The transform-origin property takes two parameters: the X-axis coordinate value and the Y-axis coordinate value. It accepts the following two types of values (and if only one parameter is given, it assumes the second one is the center):
-
Numeric (expressed in pixels or percentages): A value pair of 100% 100% places the transform origin in the bottom right corner.
-
Keywords: The keywords you can use are top, bottom, center, left, and right. A value pair of right bottom, for instance, places the transform-origin in the bottom right corner (just like a value pair of 100% 100 %).
The
default value can be then expressed like this:
(50 %,50 %) or
(center,center).
The transform-origin property is supported with vendor prefixes in WebKit, Firefox, and Opera.
snippet
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
Rotating a circle
The default transform-origin is the center of the circle, applying a rotate transform to a circle would have no visible effect—a circle rotated 90 degrees still looks exactly the same as it did before being rotated. If you gave your circle a transform-origin of 10% 10%, you would notice the circle’s rotation.
