Firefox3がtransformをサポート

2008-09-23 11:19:52

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


<br />
body{<br />
-moz-transform: rotate(90deg);<br />
}<br />

※deg=degree(度)の略

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

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

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

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

※このエントリは ブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet Japan編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]