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などの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]