回転・変形・拡大など、便利に使えるtransformプロパティですが、基準点を設定していないと意図したとおりに動いてくれない場合があります。
移動(translate)なら困ることはあまり無いと思いますが、rotate、scale、skewではどこを基準に変形しているのか理解しておくことが必要です。
たとえば同じrotateを指定していても、起点が違えば全く違う動きになります。
transform起点の設定方法を覚えておきましょう。
transformの基準点を定めるtransform-origin
transformの基準点を定めるのは「transform-origin」プロパティで初期値はcenter（ = 50% 50% ）です。
centerでは、X軸(よこ)50％、Y軸(たて)50％に基準がありますので要素中央を基準に変形を行います。
transform-originの値にはいくつか指定方法がありますのでそれぞれ説明していきます。
一語で指定する場合（top・right・bottom・left・center）
centerは50% 50% でしたが、topなど一方向のみを指定した場合、もう一方の指定は自動で50%となります。
つまり、
| 値 | X軸（横） | Y軸（縦） |
|---|---|---|
| top | 50% | top(0%) |
| right | right(100%) | 50% |
| bottom | 50% | bottom(100%) |
| left | left(0%) | 50% |
となります。
rotateを使って例示すると、
です。
黒丸が基準点です。
一語で指定する場合（pxや％など）
transform-originの値は%・px・em・remなどでも指定できますが基本は（ｘ軸 Y軸）の２つの値が必要です。
１つの値のみを指定した場合、X軸に値が適用されY軸には自動的に50％が指定されます。
(transform-origin:80％; と指定しています。)
二語で指定する
X軸・Y軸の２つの値を指定します。
topやleftなどと％、pxなどを混在させても大丈夫ですが、top・bottomはY軸に、 right・leftはX軸に指定しないとエラーが出る場合があります。
（例）（30px top）(left 40%)など。
background-positionと似ているので覚えやすいと思います。
おまけ
使い道があるかは工夫しだいですが、基準点を要素の外に置くこともできます。
最後のサンプルは、基準点を要素外に指定しています。
↓のスタートからどうぞ。
