# transform-origin property

The `transform-origin` property specifies the point relative to which element's transformations specified by the `transform` property will occur. By default, this point is the element center, and, for example, rotation will occur relative to its center. However, this behavior can be changed and the element can be made to rotate relative to its side, corner, or even relative to a point that lies outside the element.

## Syntax

`selector { transform-origin: X-axis Y-axis Z-axis; }`

The values ​​for the Y- and Z-axes are optional, you can omit them (they will take the default values). The offset of the point along the Z-axis is needed for 3D transformations.

## Values ​​for X-axis

Value | Description
--- | ---
CSS units | The value is any size units that specify the offset of the transformation center from the left border of an element. A positive value offsets the transformation center to the right (inside the element), and a negative value offsets it to the left (outside the element) relative to the left border of the element.
`left` | The horizontal rotation point on the left border of the element.
`right` | The horizontal rotation point on the right border of the element.
`center` | The horizontal rotation point is in the element center.

Default value: `center`.

## Values ​​for Y-axis

Value | Description
--- | ---
CSS units | The value is any size units that specify the offset of the transformation center from the top border of the element. A positive value offsets the transformation center down (inside the element), and a negative value moves it up (outside the element) relative to the top border of the element.
`top` | The vertical rotation point on the top border of the element.
`bottom` | The vertical rotation point on the bottom border of the element.
`center` | The vertical rotation point is in the element center.

Default value: `center`.

## Values ​​for Z-axis

Value | Description
--- | ---
CSS units | The value is any size units that specifies the offset of the transformation center from the plane of the element. A positive value offsets it toward us (from the plane of the screen), and a negative value moves it away from us.

Default value: `0px`.

## Example

Now the transform-origin property value is not set and the block will rotate around its center. Hover over the block to see the effect:

`<div id="elem">lorem ipsum</div>` `#elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform-origin: center center; transform: rotate(30deg); }`

:

## Example

Now when you hover over it, the block will rotate relative to the upper left corner:

`<div id="elem">lorem ipsum</div>` `#elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform-origin: 0px 0px; transform: rotate(30deg); }`

:

## Example

Now when hovering, the block will rotate relative to the lower right corner. To do this, you should move the transformation origin by `100%` to the right and by `100%` down (you could also set px, but when changing the element size, the transformation origin would remain in place, so it is better to do it in %):

`<div id="elem">lorem ipsum</div>` `#elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform-origin: 100% 100%; transform: rotate(30deg); }`

:

## Example

Let's rotate the block relative to the upper right corner:

`<div id="elem">lorem ipsum</div>` `#elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform-origin: 100% 0%; transform: rotate(30deg); }`

:

## Example

Rotate the block relative to the center of the left side. To do this, set the X-axis to `left` (the rotation point will be on the left), and the Y-axis to `center` (the rotation point will be in the center vertically):

`<div id="elem">lorem ipsum</div>` `#elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform-origin: left center; transform: rotate(30deg); }`

:

## Example

The property can be set not only for rotation, but also for other transformations. Let's increase the scale with `scale`, specifying the transformation origin as the lower left corner:

`<div id="elem">lorem ipsum</div>` `#elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform-origin: left bottom; transform: scale(1.5); }`

:

## Example

Now let's specify the transformation origin as the upper right corner:

`<div id="elem">lorem ipsum</div>` `#elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform-origin: right top; transform: scale(1.5); }`

:

## Example

The transformation origin can also be set outside an element. In the following example, when you hover over the red block, the black block will rotate relative to the point that is outside:

`<div id="hover"></div> <div id="elem"></div>` `#hover { border: 1px solid red; width: 50px; height: 50px; } #elem { border: 1px solid black; width: 100px; height: 50px; transition: transform 1s; transform-origin: -100px -100px; } #hover:hover + #elem { transform: rotate(30deg); }`

:

← →
↑
en ru