CSSでトランスフォーム:1つの要素に複数の変形処理を適用する

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

 前回の「CSSでトランスフォーム:変形処理「transform」の基礎」に続いて、CSSのトランスフォーム(変形処理)の機能について紹介していきたい。

 トランスフォームの設定はtransformプロパティで行うが、Safari 3.1以上とGoogle Chromeでは-webkit-transform、Firefox 3.1(ベータ版)では-moz-transformと記述する。現在のところ、それ以外のブラウザではサポートされていない。

複数のトランスフォームを指定する

 前回は「回転」「拡大・縮小」「スキュー(シアー)」「移動」のトランスフォームを個別に適用する方法を紹介したが、1つの要素に複数のトランスフォームをまとめて適用することも可能だ。

 たとえば、次のようなサンプルを用意して複数のトランスフォームを適用してみよう。ここでは、横幅300ピクセルの黄色いバーの中央に文字を配置して、画面の左上に表示している(サンプル01)。

サンプル01(画像をクリックすると拡大します) サンプル01(画像をクリックすると拡大します)
div{
width: 300px;
background-color: yellow;
text-align: center;
}
こんにちは
ブラウザで表示を確認する

 これに対して、「移動」「回転」「拡大・縮小」の処理を適用すると次のようになる。ここでは、translate()で右に150ピクセル、下に200ピクセル移動させ、rotate()で時計回りに45度の回転処理を、scale()で1.5倍の拡大処理を適用している。translate()といったトランスフォームファンクションは半角スペースで区切って指定する。

サンプル01-A(画像をクリックすると拡大します) サンプル01-A(画像をクリックすると拡大します)
div{
-webkit-transform: translate(150px, 200px) rotate(45deg) scale(1.5);
-moz-transform: translate(150px, 200px) rotate(45deg) scale(1.5);
}
ブラウザで表示を確認する

 なお、トランスフォームファンクションは記述した順番に適用されるため、記述順序を変えると処理結果も変わってくる。たとえば、translate()を最後に適用すると次のようになる。

サンプル01-B(画像をクリックすると拡大します) サンプル01-B(画像をクリックすると拡大します)
div{
-webkit-transform: rotate(45deg) scale(1.5) translate(150px, 200px);
-moz-transform: rotate(45deg) scale(1.5) translate(150px, 200px);
}
ブラウザで表示を確認する

 サンプル01-Aと01-Bの処理は次のようになっており、結果に違いが発生する。

サンプル01-Aの処理

  • 新着記事
  • 特集
  • ブログ