CSSでトランスフォーム：変形処理「transform」の基礎

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

スキュー（シアー）

　スキュー（シアー）の処理を適用するには、skew()で角度を指定する。たとえば、skew(30deg)と指定すると次のようになる。

30度のスキューを適用したもの（画像をクリックすると拡大します）

div{
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
}

※ブラウザで表示を確認する

　また、scale(x,y)の形で記述すると、横方向と縦方向の角度を別々に指定することも可能だ。たとえば、scale(30deg,0)と指定すると、横方向にだけ処理を適用することができる。

横方向にだけスキューを適用したもの（画像をクリックすると拡大します）

div{
-webkit-transform: skew(30deg,0);
-moz-transform: skew(30deg,0);
}

※ブラウザで表示を確認する

　なお、Firefox 3.1（ベータ版）では、skew(30deg)と指定しても、skew(30deg,0)と指定したときと同じ表示になってしまう。

移動

　translate()で距離を指定すると、要素の表示位置を移動させることができる。たとえば、translate(100px)と指定すると、黄色のバーが右に100ピクセル、下に100ピクセル移動する。

右に100ピクセル、下に100ピクセル移動させたもの（画像をクリックすると拡大します）

div{
-webkit-transform: translate(100px);
-moz-transform: translate(100px);
}

※ブラウザで表示を確認する

　また、scale()やskew()と同じように、translate(x,y)の形で記述すると、横方向と縦方向の移動距離を別々に指定することもできる。たとえば、translate(100px,-100px)と指定すると、黄色のバーが右に100ピクセル、上に100ピクセル移動する。

右に100ピクセル、上に100ピクセル移動させたもの（画像をクリックすると拡大します）

div{
-webkit-transform: translate(100px,-100px);
-moz-transform: translate(100px,-100px);
}

※ブラウザで表示を確認する

　なお、Firefox 3.1（ベータ版）では、translate(100px)と指定しても、translate(100px,0)と指定したときと同じ表示になってしまう。

　次回は、transformプロパティの特徴についてより細かく見ていきたい。