transform

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

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

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

指定可能な値の一覧(拡大・縮小)

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

指定可能な値の一覧(傾斜)

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

指定可能な値の一覧(移動)

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

よくあるミス

複数の変形を重ねて書くと後の値が上書きされてしまう

『transform』プロパティを複数の行に分けて書くと、後に書いた値だけが適用されます。複数の変形を同時に指定するには、半角スペース区切りで1つの宣言にまとめる必要があります。

/* NG: 後の宣言が前の宣言を上書きするため、回転のみが適用される */
.box {
    transform: translateX(50px);
    transform: rotate(45deg);
}

/* OK: 半角スペースで区切って1つの宣言に記述する */
.box {
    transform: translateX(50px) rotate(45deg);
}

translateに使える単位をpx以外にも使う

『translate()』には『px』の他に『em』や『%』も使用できます。ただし『%』を使った場合は親要素ではなく自身の要素サイズを基準とした相対値になります。

/* 自身の幅の50%分だけX方向に移動する（親要素の幅ではない） */
.box {
    transform: translateX(50%);
}

scale()に単位をつけてしまう

『scale()』の値に単位を指定することはできません。自身の大きさを『1.0』とした倍率を単位なしの数値で指定します。

/* NG: 単位はつけない */
.box { transform: scale(1.5px); }

/* OK: 単位なしで倍率を指定する */
.box { transform: scale(1.5); }

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

トップページへ