back

Transform-Origin

This is used to set the point of origin of a transform.
A 2D transform can have 2 values (X Y) while a 3D can have 3 (X Y Z)
The options are:
(1) Length, allows you to define a fixed length, for example: 20px.
(2) Percentage, allows you to set the value as a percentage.
(3) Keyword, you can set the value as: top, right, bottom, left, or center.
The Z value only works on a 3D transform, and needs to be set as a length.
For maximum browser support, you should use the following prefixes:
(1) transform-origin:
(2) -webkit-transform-origin:

Example