HTML and CSS Reference
In-Depth Information
Defining the Origin of a Transform
Whatevertransformwe'redefining,wehavetheoptiontodefineastartingpointforthetrans-
form. So, for example, if we rotate an element, by default the element will rotate exactly in
the center. You can change the point of rotation using the transform-origin property:
.box {
transform: rotate(45deg);
transform-origin: 30px 20px;
}
Here we're rotating the box 45 degrees clockwise, but we're altering the point of origin for
the rotation so it's 30px from the left of the box's boundaries and 20px from the top. So, the
element will still rotate 45 degrees, but it will do so from a different origin point, changing
the overall position.
Figure 5.4 demonstrates the same box rotated 45 degrees, but using the default transform ori-
gin (the example on the left), and using a transform origin of “30px 20px” (the example on
the right). The black outline shown in each of the rotations represents the original position of
the box before the rotate transform is applied.
Search WWH ::




Custom Search