Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

  1. トップページ
  2. CSSプロパティ辞典
  3. transform

transform

『transform』プロパティは『移動』、『拡大・縮小』、『回転』、『傾斜』などの変形を行うことができるプロパティです。

ブラウザのバージョンによっては、ベンダープレフィックス『webkit』、『moz』、『ms』等を付けないと動かない場合があるので、使用する際はベンダープレフィックスを付けるようにした方が無難です。

指定可能な値一覧
値効果
rotate(値)角度を指定して要素を回転させます。使用できる単位は『deg』のみです。
scale(値)要素を拡大・縮小させます。値には自身の大きさを『1.0』とする拡大率・縮小率を数値で記述して下さい。尚、単位の使用はできませんので数値だけを記述するよう注意して下さい。
skew(値)角度を指定して要素を傾斜変形させます。使用できる単位は『deg』のみです。
translate(値)移動距離を指定して要素を移動させます。使用できる単位は『px』のみです。
サンプルコード
transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
ブラウザでの表示結果
img {
    transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
}

『X軸』、『Y軸』、『Z軸』について

『X軸』、『Y軸』、『Z軸』は上記の画像のようになっており『拡大・縮小』、『傾斜』、『回転』、『移動』等をさせる際の軸として使用されます。
変形の基点となる位置は中心です。基点を変更したい場合は『transform-origin』を使用して下さい。

指定可能な値の一覧(回転)
値効果
rotate(回転角度)指定した角度に回転します。回転方向は時計回りとなり、使用できる単位は『deg』のみです。マイナスの値を指定することも可能です。
rotateX(回転角度)X軸を軸として指定した角度に回転します。回転方向は時計回りとなり、使用できる単位は『deg』のみです。マイナスの値を指定することも可能です。
rotateY(回転角度)Y軸を軸として指定した角度に回転します。回転方向は時計回りとなり、使用できる単位は『deg』のみです。マイナスの値を指定することも可能です。
rotateZ(回転角度)Z軸を軸として指定した角度に回転します。回転方向は時計回りとなり、使用できる単位は『deg』のみです。マイナスの値を指定することも可能です。
ブラウザでの表示結果
img {
    transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
}


img {
    transform: rotateX(45deg);
    -webkit-transform: rotateX(45deg);
    -moz-transform: rotateX(45deg);
    -ms-transform: rotateX(45deg);
}


img {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
}


img {
    transform: rotateZ(10deg);
    -webkit-transform: rotateZ(10deg);
    -moz-transform: rotateZ(10deg);
    -ms-transform: rotateZ(10deg);
}

指定可能な値の一覧(拡大・縮小)
値効果
scale(数値, 数値)『scaleX』と『scaleY』をまとめて指定します。2個目の数値は省略することができますが、省略したときは最初に指定された値が指定されているものとして扱われます。値には自身の大きさを『1.0』とする拡大率・縮小率を数値で記述して下さい。尚、単位の使用はできませんので数値だけを記述するよう注意して下さい。
scaleX(数値)要素を『X方向』に拡大・縮小させます。値には自身の大きさを『1.0』とする拡大率・縮小率を数値で記述して下さい。尚、単位の使用はできませんので数値だけを記述するよう注意して下さい。
scaleY(数値)要素を『Y方向』に拡大・縮小させます。値には自身の大きさを『1.0』とする拡大率・縮小率を数値で記述して下さい。尚、単位の使用はできませんので数値だけを記述するよう注意して下さい。
scaleZ(数値)要素を『Z方向』に拡大・縮小させます。値には自身の大きさを『1.0』とする拡大率・縮小率を数値で記述して下さい。尚、単位の使用はできませんので数値だけを記述するよう注意して下さい。
scale3d(数値X, 数値Y, 数値Z)『scaleX』、『scaleY』、『scaleZ』をまとめて指定します。値には自身の大きさを『1.0』とする拡大率・縮小率を数値で記述して下さい。尚、単位の使用はできませんので数値だけを記述するよう注意して下さい。
img {
    transform: scale(1.2, 0.8);
    -webkit-transform: scale(1.2, 0.8);
    -moz-transform: scale(1.2, 0.8);
    -ms-transform: scale(1.2, 0.8);
}


img {
    transform: scaleX(0.8);
    -webkit-transform: scaleX(0.8);
    -moz-transform: scaleX(0.8);
    -ms-transform: scaleX(0.8);
}


img {
    transform: scaleY(0.8);
    -webkit-transform: scaleY(0.8);
    -moz-transform: scaleY(0.8);
    -ms-transform: scaleY(0.8);
}


img {
    transform: scaleZ(0.8);
    -webkit-transform: scaleZ(0.8);
    -moz-transform: scaleZ(0.8);
    -ms-transform: scaleZ(0.8);
}


img {
    transform: scale3d(0.8, 1.2, 1.2);
    -webkit-transform: scale3d(0.8, 1.2, 1.2);
    -moz-transform: scale3d(0.8, 1.2, 1.2);
    -ms-transform: scale3d(0.8, 1.2, 1.2);
}

指定可能な値の一覧(傾斜)
値効果
skew(傾斜角度, 傾斜角度)『skewX』と『skewY』をまとめて指定します。2個目の傾斜角度は省略することができますが、省略した際の値は『0』と指定されているものとして扱われます。回転方向は時計回りとなり、使用できる単位は『deg』のみです。マイナスの値を指定することも可能です。
skewX(傾斜角度)X軸を軸として指定した角度に傾斜します。回転方向は時計回りとなり、使用できる単位は『deg』のみです。マイナスの値を指定することも可能です。
skewY(傾斜角度)Y軸を軸として指定した角度に傾斜します。回転方向は時計回りとなり、使用できる単位は『deg』のみです。マイナスの値を指定することも可能です。
img {
    transform: skew(5deg, 10deg);
    -webkit-transform: skew(5deg, 10deg);
    -moz-transform: skew(5deg, 10deg);
    -ms-transform: skew(5deg, 10deg);
}


img {
    transform: skewX(10deg);
    -webkit-transform: skewX(10deg);
    -moz-transform: skewX(10deg);
    -ms-transform: skewX(10deg);
}


img {
    transform: skewY(10deg);
    -webkit-transform: skewY(10deg);
    -moz-transform: skewY(10deg);
    -ms-transform: skewY(10deg);
}

指定可能な値の一覧(移動)
値効果
translate(数値X, 数値Y)『translateX』と『translateY』をまとめて指定します。2個目の数値は省略することができますが、省略した際の値は『0』と指定されているものとして扱われます。使用できる単位は『px』のみで、マイナスの値を指定することも可能です。
translateX(数値)移動距離を指定して『X方向』に移動します。使用できる単位は『px』のみで、マイナスの値を指定することも可能です。
translateY(数値)移動距離を指定して『Y方向』に移動します。使用できる単位は『px』のみで、マイナスの値を指定することも可能です。
translateZ(数値)移動距離を指定して『Z方向』に移動します。使用できる単位は『px』のみで、マイナスの値を指定することも可能です。
translate3d(数値X, 数値Y, 数値Z)『translateX』『translateY』『translateZ』をまとめて指定します。使用できる単位は『px』のみで、マイナスの値を指定することも可能です。
img {
    transform: translate(10px, 20px);
    -webkit-transform: translate(10px, 20px);
    -moz-transform: translate(10px, 20px);
    -ms-transform: translate(10px, 20px);
}


img {
    transform: translateX(30px);
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
}


img {
    transform: translateY(20px);
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
}


img {
    transform: translateZ(20px);
    -webkit-transform: translateZ(20px);
    -moz-transform: translateZ(20px);
    -ms-transform: translateZ(20px);
}


img {
    transform: translate3d(10px, 20px, 20px);
    -webkit-transform: translate3d(10px, 20px, 20px);
    -moz-transform: translate3d(10px, 20px, 20px);
    -ms-transform: translate3d(10px, 20px, 20px);
}

対応ブラウザ
デスクトップ
Chrome Chrome
36 以降 ○
35 △
34 △
33 △
32 △
31 △
30 △
29 △
28 △
↑ prefix『-webkit-』が必要
Firefox Firefox
16 以降 ○
15 △
14 △
13 △
12 △
11 △
10 △
9 △
8 △
↑ prefix『-moz-』が必要
2 以前 ×
Safari Safari
9 以降 ○
8 △
7 △
6 △
5 △
4 △
↑ prefix『-webkit-』が必要
2 以前 ×
Edge Edge
12 以降 ○
全バージョンで対応しています
IE IE
11 ○
10 ○
9 △
prefix『-ms-』が必要
8 ×
7 ×
6 ×
Opera Opera
23 以降 ○
22 △
21 △
20 △
19 △
18 △
17 △
16 △
15 △
↑ prefix『-webkit-』が必要
22 △
21 △
20 △
19 △
18 △
17 △
16 △
15 △
↑ prefix『-o-』が必要
9 以前 ×
モバイル
iOS Safari iOS Safari
9 以降 ○
8 △
7 △
6 △
5 △
4 △
↑ prefix『-webkit-』が必要
2 以前 ×
Android Android Browser
4.4 以降 ○
2 △
↑ prefix『-webkit-』が必要
Chrome Android Chrome Android
最新版 ○
デスクトップ版と同等の対応です
Firefox Android Firefox Android
最新版 ○
デスクトップ版と同等の対応です

※ バージョン情報は MDN / Can I Use に基づいています。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。

シェアするシェアする
このエントリーをはてなブックマークに追加