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

最新特集【一覧】

EPUB生成ツール「ReVIEW」について達人出版会の高橋氏に聞いてみた

1つのソースでEPUBとPDFを生成できる「ReVIEW」を試す

Snow Leopard探索記 最終回：線路は続くよどこまでも

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

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

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

　たとえば、次のようなサンプルを用意してトランスフォームの処理を適用してみよう。ここでは、横幅300ピクセルの黄色いバーの中央に文字を表示している（サンプル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度回転したもの（画像をクリックすると拡大します）

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（ベータ版）でもサポートされたことにより、今後の標準化や他のブラウザによるサポートも期待したいところだ。

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