Motion and color - HTML5 and CSS3 - page 325

The static point around which the
transform is applied can be changed
with the transform-origin property.
Here we set the third element to
expand from its left outward:
div:nth-child(3) {
transform-origin: left;
transform: scale(2.5);
}
You can also rotate elements:
div:nth-child(1) {
transform: rotate(16.5deg);
}
div:nth-child(2) {
transform: rotate(33deg);
}
div:nth-child(3) {
transform: rotate(66deg);
}
When the elements are rotated around their centers, the visual spacing
can look a little odd. In this example, transform-origin is set for each
element to bring the elements closer together:
div:nth-child(1) div {
transform-origin: bottom right;
transform: rotate(16.5deg);
}
div:nth-child(2) div {
transform-origin: top right;
transform: rotate(33deg);
}
div:nth-child(3) div {
transform-origin: top left;
transform: rotate(66deg);
}