Web Direction East 2008

Inside Web Directions East

Firefox3がtransformをサポート

といっても少し、まだ先の話だ。ただし、確実に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(度)の略

  • スクリーンキャプチャー:transform

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

transformには、他にも様々なプロパティが用意されている、SafariでもchromeでもそしてFirefoxのminefieldでも自由に試してみることができる。
確実にCSS3の時代はそこまできている。ただCSS3はまだ使い方というのはあまり、研究されていない。しかし研究をすれば使い方によっては人を驚かせるような素晴らしいUXを提供することができる。常に先をみてCSSを楽しもう!

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

コメントトラックバックを残すことが出来ます。

コメントを残す


About Web Direction East

アジア初として東京で開催される『Web Direction East』においては、「XHTML」,「 CSS」, 「Ajax」, 「User Experience」,「Information Architecture」各分野での世界最高のエキスパートをアメリカ、イギリス、オーストラリアから招聘。より具体的な内容でウェブ業界全体のスキルアップを狙います。

このイベントについて

Mail Magazine

Web Directions Eastから最新の情報をお届けします。