【CSS3リファレンス】transform

こんにちは（・∀・）

CSS3で新しく追加されたプロパティをご紹介します。今回ご紹介するCSSプロパティはtransformです。

概要

要素を移動・回転・拡大縮小・傾斜させるプロパティです。初期値の基準点は要素の中心50%, 50%ですが、transform-originで変更できます。​

値は半角スペースで区切って複数の関数を指定できます。関数の実行は先に記述されている物から順番に実行されます、順序によって表示される内容が変わる事もあります。​

transformプロパティで要素の位置やサイズを変更してもpositionで相対配置している場合と同様に前後の要素の配置には影響を与える事はありません。

.sample {
  transform: translate(100px, 100px) scale(1.5, 1.5) rotate(45deg);
}

適用要素

ブロックレベル要素・インライン要素

指定できる値

translate(右への移動距離, 下への移動距離)

移動させる距離を数値+単位で指定
2つ目の値を省略すると下方向への変化はなしに指定された事となります。

translateX(右への移動距離)

右方向へ移動する距離を数値+単位で指定

translateY(下への移動距離)

下方向へ移動する距離を数値+単位で指定

rotate(角度)

回転させる角度を指定
単位はdeg(角度)、rad(ラジアン)などが指定できます。

scale(横の倍率, 縦の倍率)

拡大縮小させる倍率を数値(単位なし)で横方向・縦方向の順にカンマで区切って指定
2つ目の値が省略されるとその倍率が縦横両方に適用されます。

scaleX(横の倍率)

横方向に拡大縮小させる倍率を数値(単位なし)で指定

scaleY(縦の倍率)

縦方向に拡大縮小させる倍率を数値(単位なし)で指定

skew(横の角度, 縦の角度)

傾斜させる角度を横方向・縦方向の順にカンマで区切って指定
単位はdeg(角度)、rad(ラジアン)で指定します。2つ目の値を省略すると縦方向への変化はなしに指定された事となります。

skewX(横の角度)

横方向に傾斜させる角度を指定
単位はdeg(角度)、rad(ラジアン)で指定します。

skewY(縦の角度)

縦方向に傾斜させる角度を指定
単位はdeg(角度)、rad(ラジアン)で指定します。

none

移動、回転、拡大縮小、傾斜しない状態に指定

初期値

none

サンプル

HTML

<p class="demo">サンプルデモ</p>

CSS

.demo {
  width: 50px;
  height: 50px;
  transform: translate(100px, 50px) scale(1.5, 1.5) rotate(45deg);
}

Result