transform | CSSプロパティ辞典

CSSプロパティ辞典

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

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

指定可能な値一覧

rotate(値) 角度を指定して要素を回転させます。使用できる単位は『deg』のみです。 scale(値) 要素を拡大・縮小させます。値には自身の大きさを『1.0』とする拡大率・縮小率を数値で記述して下さい。尚、単位の使用はできませんので数値だけを記述するよう注意して下さい。 skew(値) 角度を指定して要素を傾斜変形させます。使用できる単位は『deg』のみです。 translate(値) 移動距離を指定して要素を移動させます。使用できる単位は『px』のみです。 -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg);

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

指定可能な値の一覧(回転)

rotate(回転角度)指定した角度に回転します。回転方向は時計回りとなり、使用できる単位は『deg』のみです。マイナスの値を指定することも可能です。 rotateX(回転角度)X軸を軸として指定した角度に回転します。回転方向は時計回りとなり、使用できる単位は『deg』のみです。マイナスの値を指定することも可能です。 rotateY(回転角度)Y軸を軸として指定した角度に回転します。回転方向は時計回りとなり、使用できる単位は『deg』のみです。マイナスの値を指定することも可能です。 rotateZ(回転角度)Z軸を軸として指定した角度に回転します。回転方向は時計回りとなり、使用できる単位は『deg』のみです。マイナスの値を指定することも可能です。 -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotateX(45deg); -webkit-transform: rotateX(45deg); -moz-transform: rotateX(45deg); -ms-transform: rotateX(45deg); transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); 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』とする拡大率・縮小率を数値で記述して下さい。尚、単位の使用はできませんので数値だけを記述するよう注意して下さい。 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); 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』のみです。マイナスの値を指定することも可能です。 transform: skew(5deg, 10deg); -webkit-transform: skew(5deg, 10deg); -moz-transform: skew(5deg, 10deg); -ms-transform: skew(5deg, 10deg); -webkit-transform: skewX(10deg); -moz-transform: skewX(10deg); -ms-transform: skewX(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』のみで、マイナスの値を指定することも可能です。 transform: translate(10px, 20px); -webkit-transform: translate(10px, 20px); -moz-transform: translate(10px, 20px); -ms-transform: translate(10px, 20px); transform: translateX(30px); -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateY(20px); -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); 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);