HTML and CSS Reference
In-Depth Information
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
rotated around a
transform origin.
The diagonal
arrow represents
the new position
of the origin; the
circle represents
the rotational
For the sake of brevity, only the code targeting Firefox is displayed in
the following code.
div {
height: 50px;
width: 50px;
(continues on next page)
Search WWH ::

Custom Search