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

エ・ビスコム・テック・ラボ
2009-02-17 15:52:01
  • このエントリーをはてなブックマークに追加

スキュー(シアー)

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

30度のスキューを適用したもの(画像をクリックすると拡大します) 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ピクセル移動させたもの(画像をクリックすると拡大します) 右に100ピクセル、下に100ピクセル移動させたもの(画像をクリックすると拡大します)
div{
-webkit-transform: translate(100px);
-moz-transform: translate(100px);
}
ブラウザで表示を確認する

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

右に100ピクセル、上に100ピクセル移動させたもの(画像をクリックすると拡大します) 右に100ピクセル、上に100ピクセル移動させたもの(画像をクリックすると拡大します)
div{
-webkit-transform: translate(100px,-100px);
-moz-transform: translate(100px,-100px);
}
ブラウザで表示を確認する

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

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

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]