transform - CSS

transform とは

transform は、動きに変化をつけるためのプロパティです。

transform プロパティはインライン要素には効きません。インラインブロック要素かブロック要素に適用されます。

transform を使う

次のサンプルは、要素を傾けます。

HTML

<div id="target"></div>

CSS

target {
  height: 50px;
  width: 50px;
  background-color: black;
  transform: rotate(45deg);
}

transform の関数

transform では、プロパティではなく関数を使って、さまざまな変化を加えることができます。

translate

要素を移動させる関数です。

translate ： トランスレイト

移す、運ぶ

test

HTML

<div id="target">test</div>

CSS

#target { transform: translate(100px, 0px); }
関数 内容
translate 要素を 2D 平面上で平行移動させます。第一引数に X 軸の距離、第二引数に Y 軸の距離を指定。
translate3d 要素を3D 空間で平行移動させます。第一引数に X 軸、第二引数に Y 軸、第三引数に Z 軸の距離を指定。
translateX 要素を水平方向に平行移動させます。
translateY 要素を垂直方向に平行移動させます。
translateZ 要素を Z 軸方向に平行移動させます。

scale

要素を伸縮させる関数です。1を基準とした比率の数字を指定します。

HTML

<div id="target">test</div>

CSS

#target {
  height: 50px;
  width: 50px;
  background-color: black;
  transform: scale(1, 0.5);
}
関数 内容
scale 要素を 2D 平面上で拡大または縮小します。第一引数に X 軸の倍率、第二引数に Y 軸の倍率を指定。
scale3d 要素を 3D 空間で拡大または縮小します。第一引数に X 軸、第二引数に Y 軸、第三引数に Z 軸の倍率を指定。
scaleX 要素を水平に拡大または縮小します。
scaleY 要素を垂直に拡大または縮小します。
scaleZ 要素を Z 軸方向に拡大または縮小します。

rotate

要素を回転させることができます。単位は deg を使います。

degree ： ディグリー

角度

test

HTML

<p id="target">test</p>

CSS

#target {
  width: 100px;
  transform: rotate(45deg);
}
関数 内容
rotate 要素を 2D 平面上で特定の点を中心に回転します。角度を指定。
rotate3d 要素を 3D 空間で特定の軸を中心に回転します。第一、二、三引数で回転軸を指定し、第四引数で角度を指定。
rotateX X 軸の角度を指定。
rotateY Y 軸方向の角度を指定。
rotateZ Z 軸方向の角度を指定。

skew

オブジェクトに傾斜をつけることができます。

skew ： スキュー

斜め

HTML

<div id="target"></div>

CSS

#target {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  transform: skew(30deg, 20deg);
}
関数 内容
skew 要素を 2D 平面上で歪ませます。
skewX 要素を水平方向に歪ませます。
skewY 要素を垂直方向に歪ませます。

transform と transition の組み合わせ

HTML

<button id="target">button</button>

CSS

#target {
  transition-duration: 500ms;
}
#target:hover {
  transform: scale(1.5);
}