CSS3 transformプロパティ

コンテンツを移動、変形、拡大縮小、回転などを実現するプロパティです。CSS3なのでモダンブラウザにしか効きません。

IE10以降に効くかどうか知ったこっちゃありません。

transformプロパティの関数

• translate() (横,縦)と指定して移動
• translateX() 横に移動
• translateY() 縦に移動
• scale() (横,縦)もしくは(横縦)と指定して倍率で拡大縮小
• rotate() 右回りに回転させる。単位はradラジアンまたはdeg度で指定

関数を列挙しても自分自身わかりづらいので例をいくつか

p { transform: translateY(1em) rotate(3deg); }

右に３度傾きます。translateYで1em下げたのは
傾けたことで上行に被らないようにするためです。

p { transform: rotateY(180deg); }

180度反転 transform: rotateY(180deg)

p { transform: skewX(45deg); }

平行四辺形状に歪ませる

これらはテキストだけでなく画像などにも有効です。