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);
}
: