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

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

 ウェブページに表示した文字や画像を回転したり、歪めたりすることができれば便利なのに――そう考えたことはないだろうか。CSSのトランスフォームの機能を利用すれば、「回転」「拡大・縮小」「スキュー(シアー)」「移動」の4種類の変形処理を簡単に適用することができる。

トランスフォームの機能を利用する

 トランスフォームの機能を利用するには、transformプロパティを利用する。現時点ではSafari 3.1以上とGoogle Chrome、Firefox 3.1(ベータ版)が対応しており、SafariとGoogle Chromeでは-webkit-transform、Firefoxでは-moz-transformと記述する。

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

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

 サンプル01に対して「transform: rotate(45deg)」と指定すると、文字を表示した黄色いバーを時計回りに45度回転することができる。「deg」はCSS 3の草案「Values and Units」で定義されている角度の単位だ。

サンプル01を45度回転したもの(画像をクリックすると拡大します) サンプル01を45度回転したもの(画像をクリックすると拡大します)
div{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
ブラウザで表示を確認する

トランスフォームとCSSの標準規格

 CSSのトランスフォームの機能は、SafariやGoogle ChromeのレンダリングエンジンであるWebKitによって開発された。そのため、現時点ではCSSの標準規格には採用されていないが、SVG(Scalable Vector Graphics)の標準規格に含まれるトランスフォームの機能を元に開発されており、記述形式などはSVGの規格に則ったものとなっている。

 SVGは2次元のベクターグラフィックスをXMLで記述するための言語で、W3Cから標準規格となる勧告「Scalable Vector Graphics 1.1 Specification」がリリースされている。

 WebKit系のブラウザだけでなく、Firefox 3.1(ベータ版)でもサポートされたことにより、今後の標準化や他のブラウザによるサポートも期待したいところだ。

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

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