transform で要素を回転させたりする場合の中心点を指定します。X軸方向には left, center, right, <percentage>, <length> のいずれかを指定します。Y軸方向には top, center, bottom, <percentage>, <length> のいずれかを指定します。Z軸方向には <length> を指定します。値が 1つしか無い場合、2番目の値は center とみなされます。値が 2個以下の場合、3番目の値は 0px とみなされます。基本的には X軸、Y軸、Z軸の順番で指定しますが、bottom right など明確な場合は、X軸と Y軸の順番は入れ替えることができます。初期値は 50% 50% で、要素の中央を中心として回転させます。

transform-origin: 50% 50%;         // 要素の中央を中心とする
transform-origin: left top;        // 要素の左上を中心とする
transform-origin: right bottom;    // 要素の右下を中心とする
transform-origin: bottom right;    // X,Yが明確になる場合はX軸とY軸の順番を入れ替えてもよい
transform-origin: 10px 20px 30px;  // X軸=10px, Y軸=20px, Z軸=30px

transform-origin を指定しない一つ目の例では、画像の中心(50% 50%)を中心として画像を回転させています。transform-origin を指定した二つ目の例では、画像の右上(0px 0px)を中心として画像を回転させています。

.test-rotate-1 {
  transform: rotate(20deg);
}
.test-rotate-2 {
  transform-origin: left top;
  transform: rotate(20deg);
}

<img src="../../image/yuki5.gif" width=60 height=80 class="test-rotate-1" alt="Yuki">
<img src="../../image/yuki5.gif" width=60 height=80 class="test-rotate-2" alt="Yuki">

• http://www.w3.org/TR/css-transforms-1/#transform-origin-property
• https://developer.mozilla.org/ja/docs/Web/CSS/transform-origin
• http://caniuse.com/#search=transform