2D Transforms and Transitions - Beginning CSS3 - page 436

You can use a negative value to rotate an element counterclockwise. For example, the styles in rotate_2.html
use a negative angle and the equivalent positive value to rotate the images in the opposite direction like this:
img:first-child {
transform: rotate(-18deg);
}
img:last-child {
transform: rotate(342deg);
}
The values -18° and 342° have the same meaning, so both images are displayed at the same angle, as shown
in Figure 20-5 .
Figure 20-5. You can use a negative angle to rotate an element counterclockwise
Changing the Anchor Point with transform-origin
By default, 2D transforms originate from the center of an element. With translate() , translateX() , and
translateY() , it makes no difference where the movement is calculated from. The result is always the same.
However, with the other transform functions, it can make a significant difference. The images in Figures 20-4 and
20-5 are rotated around their center points. But you can change the anchor point using transform-origin .
The styles in rotate_3.html rotate both images at the same angle (-18°), but around different anchor points
like this:
img {
/* Other styles omitted */
transform: rotate(-18deg);
}
img:first-child {
transform-origin: right top;
}
img:last-child {
transform-origin: left bottom;
}