transform-origin

The transform-origin property sets the origin of an element’s transformation.

Syntax

transform-origin: <values>;

The transform-origin property can have up to three values:

  • The first value is for the x-axis:
    • left
    • center
    • right
    • Length value (e.g., 50px)
    • Percentage value (e.g., 25%)
  • The second value is for the y-axis:
    • top
    • center
    • bottom
    • Length value (e.g., 50px)
    • Percentage value (e.g., 25%)
  • The third value is for the z-axis and can only be a length value (e.g., 50px).

Note: The order in which the x-axis and y-axis values are declared does not matter if only keywords are used.

Example 1

Setting an img elements transformation origin from the center.

img {
transform-origin: center;
}

Example 2

Setting an img elements transformation origin from the top left.

img {
transform-origin: top left;
}

Example 3

Setting an img elements transformation origin from the bottom left with a z-axis offset of 100px.

img {
transform-origin: bottom left 100px;
}

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn CSS on Codecademy