Most people who use Adobe products (Flash, Photoshop, etc..) should be familiar with the anchor point. It is best described as the point around which the image will rotate. My experience with anchor ponts comes mostly with Flash and using Cocos2d for game programming on the iPhone.

A classic example of using anchor points in development is animated a catapult arm. You would place the anchor point at the end of the arm so the arm stays attached at the bottom and rotates out.

In this example we would set the anchor point here:

The problem when working with CSS3 is that there is no anchor point property. To rotate an image in webkit for example we could do this:

However we can translate and rotate. The nice thing with css3 transforms is that they are applied in the order they are listed, so we can use translation and rotation in combination to accomplish the same effect as moving the anchor point. We simply move the image ny how far we want to move the anchor point (from the center), rotate the image, then move the image back. You can see the final result below.

Throw Back

Here's what the code looks like. One thing to keep in mind is that you have to do the same translation before the animation, but with 0 rotation starting, otherwise it will add the translation into the rotation to some interesting results.

.catapult {
  -webkit-transition: all 1s ease-in;
  -moz-transition: all 1s ease-in;
  -o-transition: all 1s ease-in;
  -webkit-transform: translateX(55px) rotate(0deg) translateX(-55px);
  -moz-transform: translateX(55px) rotate(0deg) translateX(-55px);
  -o-transform: translateX(55px) rotate(0deg) translateX(-55px);
}
.throw {
  -webkit-transform: translateX(55px) rotate(45deg) translateX(-55px);
  -moz-transform: translateX(55px) rotate(45deg) translateX(-55px);
  -o-transform: translateX(55px) rotate(45deg) translateX(-55px);
}

When we click on the throw button, we add the throw class and the animation begins. To go back, we remove the throw class and the css3 transforms handle animating. You can read more about the css3 animation/transitions here.