今回登場したCSSプロパティのまとめ
transform
transformプロパティは、要素を変形させるプロパティだ。変形の種類はtransform関数で指定し、変形を解除する場合は「none」を指定する。
transform: transform関数() | none
transform関数
変形の種類 | transform関数名 | ()に指定する値 |
---|---|---|
移動 | translate | X軸,Y軸の移動距離 |
translateX | X軸の移動距離 | |
translateY | Y軸の移動距離 | |
回転 | rotate | 角度(deg) |
拡大/縮小 | scale | X軸,Y軸への拡大/縮小 |
scaleX | X軸への拡大/縮小 | |
scaleY | Y軸への拡大/縮小 | |
傾斜 | skew | X軸,Y軸の傾斜角度(deg) |
skewX | X軸の傾斜角度(deg) | |
skewY | Y軸の傾斜角度(deg) |
translate
-webkit-transform: translate(15px, -15px); -moz-transform: translate(15px, -15px); -o-transform: translate(15px, -15px); transform: translate(15px, -15px);
![](/img/2011/05/10/913649/l/f2e7322ad0fb3020.jpg)
translateX
-webkit-transform: translatex(15px); -moz-transform: translatex(15px); -ms-transform: translatex(15px); /*IE9*/ -o-transform: translatex(15px); transform: translatex(15px);
![](/img/2011/05/10/913650/l/7129ca4941868bc1.jpg)
translateY
-webkit-transform: translatey(15px); -moz-transform: translatey(15px); -ms-transform: translatey(15px); /*IE9*/ -o-transform: translatey(15px); transform: translatey(15px);
![](/img/2011/05/10/913651/l/11c4731ac99accae.jpg)
rotate
-webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg)
![](/img/2011/05/10/913652/l/519caed967a319de.jpg)
scale
-webkit-transform: scale(1.5, 2); -moz-transform: scale(1.5, 2); -ms-transform: scale(1.5, 2); -o-transform: scale(1.5, 2); transform: scale(1.5, 2);
![](/img/2011/05/10/913653/l/f48002cb511cf53c.jpg)
scaleX
-webkit-transform: scalex(0.5); -moz-transform: scalex(0.5); -ms-transform: scalex(0.5); -o-transform: scalex(0.5); transform: scalex(0.5);
![](/img/2011/05/10/913654/l/8b0c290a9dde0846.jpg)
scaleY
-webkit-transform: scaley(2); -moz-transform: scaley(2); -ms-transform: scaley(2); -o-transform: scaley(2); transform: scaley(2);
![](/img/2011/05/10/913655/l/8f21a03faf1b0335.jpg)
skew
-webkit-transform: skew(15deg, 4deg); -moz-transform: skew(15deg, 4deg); -ms-transform: skew(15deg, 4deg); -o-transform: skew(15deg, 4deg); transform: skew(15deg, 4deg);
![](/img/2011/05/10/913656/l/bea31a155e61874b.jpg)
skewX
-webkit-transform: skewx(15deg); -moz-transform: skewx(15deg); -ms-transform: skewx(15deg); -o-transform: skewx(15deg); transform: skewx(15deg);
![](/img/2011/05/10/913657/l/9515ee6344ebd9f2.jpg)
skewY
-webkit-transform: skewy(-6deg); -moz-transform: skewy(-6deg); -ms-transform: skewy(-6deg); -o-transform: skewy(-6deg); transform: skewy(-6deg);
![](/img/2011/05/10/913658/l/d31438540fea4d0f.jpg)
transform-origin
transformの原点(変形の中心)は、transform-originプロパティで設定する。
transform-origin: X座標 Y座標
座標は、キーワード(top right center bottom left)もしくは数値(%、px)で指定でき、初期値は50% 50%だ。
-webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%;
![](/img/2011/05/10/913659/l/0502c54a96a433fa.jpg)
ブラウザーの対応状況
ブラウザー名 | IE | Firefox | Safari | chrome | Opera |
---|---|---|---|---|---|
バージョン | 9+ | 3.5+ | 3.1+ | 1+ | 10.50+ |
プリフィックス | -ms- | -moz- | -webkit- | -webkit- | -o- |