強火で進め

このブログではプログラム関連の記事を中心に書いてます。

Firefox 10で遂にCSS 3D Transformsに対応(使う場合はちょっと注意点有り)

Firefox CSS3

Firefox 10で遂にFirefoxもCSS 3D Transformsに対応しました。これで未対応のメジャーブラウザはIEとOperaだけとなりました(まぁ、IEはまだ次の10で対応予定みたいですが)。

その為、以前作ったこのプログラムなんかも「Firefoxで動く様になるはずだ!!」と期待してテストしました。

CSS 3D TransformsとCSS Animationsでフォト蔵の写真をぐるぐる - 強火で進め
http://d.hatena.ne.jp/nakamura001/20110218/1298001031

しかし、単純にベンダープレフィックスの -moz- を追加しただけではパース(遠近感)については値が反映されていない様で、こんな表示となってしまいました。

色々とテストしたところ以下の様に記述していた部分を

        perspective: 800;
        -webkit-perspective: 800;
        -moz-perspective: 800;

この様に記述するようにしたらちゃんとパースがかかる様になりました。

        perspective: 800;
        -webkit-perspective: 800;
        -moz-perspective: 800px;

見ての通り違いは -moz-perspective に指定している値に px が付いてるか付いてないかです。

こちらの修正を行ったものがこちらです。こちらであればFirefox、Safari、Chromeで動作します。

w3cの仕様のperspective の項目を観ると none | となっています。そのため、 none or 数値 で無いとダメですね。

CSS 3D Transforms Module Level 3
http://www.w3.org/TR/css3-3d-transforms/#perspective-property

ここが ではなく、 であれば px 指定などが付いていないダメという仕様で良かったのですが…

Syntax and basic data types
http://www.w3.org/TR/2004/CR-CSS21-20040225/syndata.html#value-def-length

CSSでは の指定の場合が多いので間違って実装したのでは無いかと思われます。因みに、WebKit系の実装では 800 と 800px のいずれの指定でも正しく解釈されるみたいです。
(2012/02/05 追記)
potappoさんにコメント欄にてEditor's Draftでは になっているとの情報を頂きました。Firefoxではこちらの仕様を採用したのでこの様な実装になったのかもしれません。

http://dev.w3.org/csswg/css3-3d-transforms/#perspective-property