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);
}

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

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

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