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

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

トランスフォームファンクション

 CSSのトランスフォームでは回転以外の変形処理を適用することもできる。回転を適用するときはtransformプロパティの値を「rotate()」と指定したが、この「rotate()」はトランスフォームファンクションと呼ばれ、変形の種類ごとに次のように用意されている。

トランスフォームファンクション
トランスフォームファンクション変形の種類
rotate()回転
scale()拡大・縮小
skew()スキュー(シアー)
translate()移動

 サンプル01に対して回転以外の変形処理を適用すると、それぞれ次のようになる。

拡大・縮小

 拡大・縮小の処理を適用するには、scale()で倍率を指定する。たとえば、scale(0.5)と指定すると、2分の1の大きさに縮小することができる。このとき、文字サイズだけでなく、黄色いバーも縮小されることに注目してほしい。

2分の1倍の大きさで表示したもの(画像をクリックすると拡大します) 2分の1倍の大きさで表示したもの(画像をクリックすると拡大します)
div{
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
}
ブラウザで表示を確認する

 また、scale(x,y)の形で記述すると、横方向と縦方向の倍率を別々に指定することも可能だ。たとえば、scale(0.5,2)と指定すると、横方向は2分の1に、縦方向は2倍に拡大・縮小して表示することができる。

横方向と縦方向の倍率を変えたもの(画像をクリックすると拡大します) 横方向と縦方向の倍率を変えたもの(画像をクリックすると拡大します)
div{
-webkit-transform: scale(0.5,2);
-moz-transform: scale(0.5,2);
}
ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]