Firefox web browser - Faster, more secure & customizable

FirefoxのオーロラチャンネルにはCSS 3Dトランスフォームの機能が実装されている。CSS 3Dトランスフォームの機能を活用すると、従来はプラグインや特定のブラウザが提供する独自の機能を使わなければ実現できなかった表現をCSSで簡単に実装できるようになる。

どのような効果を実現できるのかの簡単な説明が開発者向けブログにおいて「Screencast: 3D CSS rollovers and 3D CSS tester」として公開された。回転するロゴをFirefoxナイトリー/オーロラで閲覧した場合と、Firefox安定版で閲覧した場合とで比較するとわかりやすい。

Firefox 11ナイトリーではロゴの上にマウスを移動させると、MDNのロゴとHTML5のロゴが回転しながら表示される

Firefox 8はこの機能を実装していないため、初期の表示がかぶってしまうほか、回転せずにいきなりHTML5のロゴが表示される

Firefox 11ナイトリーや10オーロラではMDNのロゴとHTML5のロゴが回転して表示されるが、Firefox 8では回転できず、マウスを持ってくるといきなりHTML5のロゴが表示される(Fun with 3D rollovers)。このデモはFirefoxナイトリーやオーロラのみならず、ChromeやSafariでも確認できる。

3D CSS Testerのページで3D CSSトランフォームのデモを体験できる

左側にある値を変更するとオンザフライで動作に反映される

このデモが本当にCSSで実現されているのかは「3D CSS Tester」のページを試すと分りやすい。回転方向やサイズ、効果などオンザフライで変更して試すことができるデモページになっており、どのような設定がどういった表示になるのかを確認できる。