HTML Dog
Skip to navigation

CSS Property: transform-origin

The point at which transformations are measured from.

Works hand-in-hand with the transform property.

The same rotated box with different transform origins.

Possible Values

ValueDescriptionExample
[length]The horizontal distance from the left of the bounding box. Vertically centered.100px
[percentage]The horizontal distance from the left of the bounding box, the percentage taken as that of the width of the bouncing box. Vertically centered.25%
centerHorizontally and vertically centered.
topTop edge of the bounding box. Horizontally centered.
rightRight edge of the bounding box. Vertically centered.
bottomBottom edge of the bounding box. Horizontally centered.
leftLeft edge of the bounding box. Vertically centered.
[value] [value]Unless keywords are used (such as top right, the first value is the horizontal distance from the left edge and the second value is the vertical distance from the top edge of the bounding box.100px 25%
[value] [value] [length]For 3D transforms. As [value] [value], with the additional length value used to define a position on the z-axis.50px bottom 25px
inherit
initial
unset

Example


#pool {
    transform-origin: top;
    transform: rotate(10deg);
}
/* Rotates the box 10 degrees clockwise around the top-center point. */

#loch {
    transform-origin: -20px -40px;
    transform: rotate(-20deg);
}
/* Rotates the box 20 degrees counter-clockwise around a point 40px above and 20px to the left of the top-left corner. */

Browser support

Can I Use transforms2d? Data on support for the transforms2d feature across the major browsers from caniuse.com.

And Can I Use transforms3d? Additional data on support for the transforms3d feature.