CSS3 変形処理を行う transform プロパティ
- Category ：
- CSS3
transform は文字や画像を拡大・縮小、移動、回転などを指定出来るプロパティです。
単独でも使いがっては色々あるのですが、前回の記事「CSS3 アニメーション（Transitions）の使用方法」と併用して使ったらさらに面白い動きも出来ちゃったりします。
という事で今回は transform の基礎や使い方やなどを紹介したいと思います。
…ここからが続き
Transform の基本
- 対応ブラウザ（2010 3/31 現在）
- Safari , Google Chrome , Firefox
transform
生成されたボックスを変形、移動、回転などを指定出来ます。指定できる値は以下の通りです。
| rotate(deg) | 回転（deg で指定。10deg や -10deg など） |
|---|---|
| scale(xy[x,y]) | 拡大・縮小（数値を指定。1 や 0.5 など） |
| skew(deg) | X軸，Y軸へのゆがみ（degで指定。10deg や -10deg など） |
| translate(xy[x,y]) | 移動（px で指定。10px など） |
transform-origin
transform の基準点を指定します。（初期値は 50% 50% と要素の中心です。）
回転 rotate(deg)の使い方
指定された要素を回転させる事が出来ます。（deg で指定。10deg や -10deg など）
transform-origin を指定しない
.demo1 {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
.demo2 {
-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);
}
.demo3 {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
}
rotate(deg) transform-origin を指定しない
transform-origin を要素の左下に指定
※上記ソースに下記ソース追加
div {
-moz-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
}
rotate(deg) transform-origin を要素の左下に指定
拡大・縮小 scale(xy[x,y])の使い方
指定された要素を拡大・縮小させる事が出来ます。（数値を指定。2 や 0.5 など）
.demo1 {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
}
.demo2 {
-webkit-transform: scale(2.0);
-moz-transform: scale(2.0);
}
X軸，Y軸へのゆがみ skew(deg)の使い方
指定された要素をX軸，Y軸へのゆがまさせる事が出来ます。（degで指定。10deg や -10deg など）
.demo1 {
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
}
.demo2 {
-webkit-transform: skew(150deg);
-moz-transform: skew(150deg);
}
.demo3 {
-webkit-transform: skew(-10deg);
-moz-transform: skew(-10deg);
}
.demo4 {
-webkit-transform: skew(0,-10deg);
-moz-transform: skew(0,-10deg);
}
移動 translate(xy[x,y])の使い方
指定された要素を移動させる事が出来ます。（px で指定。10px など）
.demo1 {
-webkit-transform: translate(300px);
-moz-transform: translate(300px);
}
.demo2 {
-webkit-transform: translate(-50px,100px);
-moz-transform: translate(-50px,100px);
}
