Webページを作っていると「ボタンを少し横にずらしたい」「画像を回転させたい」「マウスを乗せたときに大きさを変えたい」というような、CSSで要素を直接変形したいと思うようなことがあります。そんなときにとても役立つのが、CSSのtransformプロパティです。このプロパティは要素を自由自在に変形させるためのプロパティで、使いこなせるとCSSでのデザイン表現の幅が大きく広がります。
この記事では、transformプロパティの使い方を詳しく解説していきます。

transformプロパティとは

transformプロパティは、英語の「Transform（変形する）」という意味の通り、要素（文字や画像、ボックスなど）さまざまな変形を適用するために使用するCSSプロパティです。
具体的には、次のようなことができます。

• 移動：要素を元の位置からずらす
• 回転：要素の角度を変える
• 拡大・縮小：要素の大きさを変える
• 傾斜：要素をななめに歪ませる

transformプロパティは、CSSでアニメーション（動き）を作るときなどにも欠かせない、とても重要なプロパティになります。

transformプロパティの概念の基本「軸（じく）」について

transformを理解するために、とても大切なのが「軸」です。2次元（平面）の変形では、次の2つの軸を使います。

• X軸：横方向　右が正（プラス）、左が負（マイナス）
• Y軸：縦方向　下が正（プラス）、上が負（マイナス）

transformの多くの関数は、「X方向にどれだけ動かすか」「Y方向にどれだけ動かすか」という考え方を使います。注意が必要なのは、 数学のグラフとは違い、Webでは下が正（プラス）になりますので気をつけましょう。

transformプロパティに指定できる値

transform プロパティに指定できる値には、規定値と以下の4つのものがあります。

transformプロパティに指定する特殊な値

transformプロパティに指定するのは少し特殊な値で値関数（座標変換関数）というものを指定します。

値関数は、CSSプロパティで使用される値を返すために、特別なデータ処理や計算を呼び出す文です。単に値を指定するだけではなく、値関数の「（）」内に指定した数値などから計算・処理した答えを返して設定できる機能を持っています。

transformプロパティに指定できる値と値関数を見ていきましょう。

規定値：none

transform プロパティの規定値は「none」になります。これは「変形なし」という意味で、要素はそのままの大きさ、形、位置で表示されます。

.element {
   transform: none;
}

値：noneは、指定した変形を打ち消したい（リセット）ときに設定したいときに使用します。

translate（移動）の使い方

translate関数は要素の表示位置を移動させるのに使用します。translate関数には「translateX()」、「translateY()」、「translate()」があります。

値：translateX()

translateX() は横（x軸）方向に移動をさせるときに使用します。（）内には移動したい距離を指定し、正の値を指定すると右へ、負の値を指定すると左へ要素を移動します。

<div class="box box1">要素１</div>
<div class="box box2">要素２</div>

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    color: #ffffff;
    text-align: center;
    line-height: 100px;
    transition: transform 0.5s ease;
}
.box1:hover {
    transform: translateX(30px);
}
.box2:hover {
    transform: translateX(-30px);
}

値：translateY()

translateY() は縦（y軸）方向に移動をさせるときに使用します。（）内には移動したい距離を指定し、正の値を指定すると下へ、負の値を指定すると上へ移動します。

.box1:hover {
    transform: translateY(30px);
}
.box2:hover {
    transform: translateY(-30px);
}

値：translate()

translate()は、translateX()とtranslateY()のショートハンドプロパティです。translate()は要素を縦横（x軸・y軸両方向）同時に移動させることができます。（）内に「,（カンマ）」で区切って２つの値が指定できます。１つ目の値はx軸方向の指定で、２つ目の値は、y軸方向の指定になります。
２つ目の値は省略可能で、その場合、translateX()でx軸方向のみの移動を指定しているのと同じになります。

.box1:hover {
    transform: translate(30px, 30px);
}
.box2:hover {
    transform: translate(-30px, -30px);
}

rotate（回転）の使い方

rotate関数は要素を回転させるのに使用します。

値：rotate()

rotate()は要素を回転させるときに使用する値です。（）内には回転させる角度を指定しますが、指定する値の単位にはdeg（デグ）を使用します。degは「Degree」の略で角度を意味します。正の値を指定すると時計回りに、負の値を指定すると反時計回りに要素を回転します。

.box1:hover {
    transform: rotate(180deg);
}
.box2:hover {
    transform: rotate(-180deg);
}

scale（拡大・縮小）の使い方

scale関数は要素を拡大・縮小させるさせるのに使用します。scale関数には「scaleX()」、「scaleY()」、「scale()」があります。

値：scaleX()

scaleX() は横（x軸）方向に拡大・縮小させるときに使用します。（）内には伸縮させる倍率を指定し、値に1以上の数を指定すると要素を拡大、「0~1」の間の少数を指定すると要素を縮小することができます。

.box1:hover {
    transform: scaleX(1.5);
}
.box2:hover {
    transform: scaleX(0.75);
}

値：scaleY()

scaleY() は縦（y軸）方向に拡大・縮小させるときに使用します。倍率の指定のしかたは、scaleX() と同様です。

.box1:hover {
    transform: scaleY(1.5);
}
.box2:hover {
    transform: scaleY(0.75);
}

値：scale()

scale()はscaleX()とscaleY()のショートハンドハンドプロパティです。scale()は要素を縦横（x軸・y軸両方向）同時に拡大・縮小させることができます。（）内に「,（カンマ）」で区切って２つの値が指定できます。
１つ目の値は横（x軸）方向の指定で、２つ目の値は、縦（y軸）方向の伸縮倍率の指定になります。

transform: scale(x軸の倍率, y軸の倍率);

２つ目の値は省略可能で、その場合、横（x軸）方向に指定した伸縮倍率と同じ値が、縦（y軸）方向にも適用されます。例えば、scale(1.5)と指定した場合は、scale(1.5, 1.5)と指定したのと同じになります。

.box1:hover {
    transform: scale(1.5, 1.5);
}
.box2:hover {
    transform: scale(0.75, 0.75);
}

scale関数の伸縮倍率に負の値を指定する

scale関数の伸縮倍率に「-1」を指定すると、指定した軸方向で要素を反転することが可能になります。

.box1:hover {
    transform: scale(-1, 1);
}
.box2:hover {
    transform: scale(1, -1);
}

画像などを反転させたいときなどにも使うことができます。

skew（傾斜）の使い方

skew関数は要素を傾斜させるのに使用します。skew関数には「skewX()」、「skewY()」、「skew()」があります。

値：skewX()

skewX() は、横（x軸方向）に傾斜をつけるときに使用します。（）内には傾けたい傾斜角度を指定します。正の値も負の値も指定することができます。

.box1:hover {
    transform: skewX(30deg);
}
.box2:hover {
    transform: skewX(-30deg);
}

値：skewY()

skewY() は、縦（y軸方向）に傾斜をつけるときに使用します。傾斜角度の指定のしかたは、skewX() と同様です。

.box1:hover {
    transform: skewY(30deg);
}
.box2:hover {
    transform: skewY(-30deg);
}

値：skew()

skew()はskewX()とskewY()のショートハンドハンドプロパティです。scale()は要素を縦横（x軸・y軸両方向）同時に傾斜させることができます。（）内に「,（カンマ）」で区切って２つの値が指定できます。
１つ目の値は横（x軸）方向の指定で、２つ目の値は、縦（y軸）方向の傾斜の指定になります。

transform: skew(x軸の傾斜角度, y軸の傾斜角度);

２つ目の値は省略可能で、横（x軸）方向に指定した傾斜角度と同じ値が、縦（y軸）方向にも適用されます。例えば、skew(10deg)と指定した場合は、skew(10deg, 10deg)と指定したのと同じになります。

.box1:hover {
    transform: skew(30deg, 30deg);
}
.box2:hover {
    transform: skew(-30deg, -30deg);
}

transformの値を複数指定する場合

transformプロパティの値を複数指定したい場合、それぞれの値を半角スペースを空けて記述します。

.box1:hover {
    transform: translateX(30px) rotate(360deg) scale(1.3);
}

複数の値を指定する場合、書く順番で結果が変わることがあるので注意が必要です。次の例のように「移動」してから「回転」させるのと、「回転」させてから「移動」するのとでは、最終的に要素が移動する位置に違いが出ています。

.box1:hover {
    transform: translateX(50px) rotate(45deg);
}
.box2:hover {
    transform: rotate(45deg) translateX(50px);
}

transformが効かない場合の原因

transformが効かない場合のよくあるケースについていくつか紹介をしておきます。

インライン要素に指定している場合

transformプロパティは、<a>タグや<span>タグなどのインライン要素に指定しても効きません。適用させるには、のdisplayプロパティで、inline以外の値を適用させる必要があります。

<span class="inline-box1">インライン要素にはtransformが効かない</span><br>
<span class="inline-box2">インライン要素以外にはtransformが効く</span>

.inline-box1 {
    transform: translate(50px , 50px);
}
.inline-box2 {
    display: inline-block;
    transform: translate(50px , 50px);
}

transformプロパティを複数回指定している場合

transformプロパティの値を複数指定したいとき、transformプロパティを複数回指定してしまうと、最後のtransformプロパティ以外は上書きされて適用されません。

次のようにtransformプロパティを２回指定した場合、先に書いた「transform: rotate(45deg)」は、後に書いた「transform: translateX(30px)」によって上書きされてしまい効きません。

.box {
    transform: rotate(45deg);
    transform: translateX(30px);
}

transformプロパティの値を複数指定する場合、それぞれの値を半角スペースを空けて記述しましょう。

まとめ

• transformは 要素の見た目を変形するプロパティ
• 移動・回転・拡大縮小・傾けることができる
• レイアウトには影響しない
• 軸（X・Y）を意識すると理解しやすい
• アニメーションや動きのあるデザインにとても便利