HTML and CSS Reference
In-Depth Information
transform-origin
The origin for any transform is by default the center of the element (
50%
50%
). You can adjust this origin using the
transform-origin
property,
allowing for rotation around a different point.
transform-origin
accepts
two values: the first is the horizontal position of the element, and the
second is the vertical position. Fixed units such as
px
units, negative
values, and values greater than 100 percent are all accepted, allowing for
the point of origin to be moved outside the element. Also accepted are
keywords for defining the origin point, including
left
,
center
, and
right
along the x-axis and
top
,
center
, and
bottom
along the y-axis.
Figure 14.11
shows how the effects of a rotation of an element change
when the transform-origin is changed from its default position.
Figure 14.11
Elements
rotated around a
transform origin.
The diagonal
arrow represents
the new position
of the origin; the
circle represents
the rotational
transform.
For the sake of brevity, only the code targeting Firefox is displayed in
the following code.
note
div {
height: 50px;
width: 50px;
(continues on next page)
