WDE08 Blog: Firefox3がtransformをサポート

• 菊池
• 2008年9月23日
• 11:19 AM
• コラム スポンサーについて ブラウザ ユーザビリティ 進行状況

といっても少し、まだ先の話だ。ただし、確実にtransformをFirefox3はサポートする。ただ、そもそもtransformとはなんぞやと思ってる方も多いとおもうので少し紹介しよう。transformとは主にボックスに対してscale(拡大／縮小)、skew(斜めへの傾き)、translate(移動)、rotate(回転)、とそれぞれ指定ができる。これはマウスをのせた状態（hover）に対しても指定が可能。いままでは、このプロパティに関してはwebkit系のみがサポートをしていたが遂にmozillaもサポートサポートを始めたようだ。ただし、minefieldというプロトタイプのみだ。このプロトタイプは以下のURLからダウンロードすることができる。

minefield

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

さていよいよ肝心の書き方だが全てにvendor prefix(接頭辞)の-moz-をつけることになる。

まずはrotate(回転)



body{

-moz-transform: rotate(90deg);

}



※deg=degree(度)の略

これでウェブサイトが時計回りに90度回転する。非常に面白い機能だ。

transformには、他にも様々なプロパティが用意されている、SafariでもchromeでもそしてFirefoxのminefieldでも自由に試してみることができる。

確実にCSS3の時代はそこまできている。ただCSS3はまだ使い方というのはあまり、研究されていない。しかし研究をすれば使い方によっては人を驚かせるような素晴らしいUXを提供することができる。常に先をみてCSSを楽しもう！

※-moz-に関してはmozillaのブラウザーの開発者であるRobert O’CallahanがmozillaのWebTechブログにて最近ではOKと述べているので使用の是非についてはいまさら議論の余地はないだろう。

• 参考
  
  
  
  http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined
  
  

Images:

The images are downsized due to limited space here. The original dimensions may differ.
Click on the image to open it on a new tab.