追記：2012年09月05日現在、23.0.1255.0 dev-mではこの症状は発生しなくなっています。

cssのanimationにopacityとtransform:rotateを同時に指定するとChromeではtransformが効かなくなります。

個人的に調べた感じですと、おそらく21からこの仕様になっています。

これによってCSS Baseballが死にました。

MacでもWindowsでもダメだと思います。

outline:1px solid transparent;するとアンチエイリアスが捗る場合があるのですが、今回はダメでした。

outline:1px solid transparent;のことについては以下参照
http://logicalfriday.com/2012/03/28/finally-a-legitimate-use-for-3d-css/

追記：2013年3月19日現在、Google Chrome 27.0.1438.7 dev では以下に書いてある不具合は既に解決されているようです。

タイトルが長いです。

今、手元にホイールのついたマウスがないのでサンプルが探しにくいのですが、こういう感じ（jQueryで横スクロールのアニメーションするサイトを作る方法 – ウェブロケッツマガジン）のものをnoJSでやってみたら、色々な仕様なのかバグなのかよくわからないことを発見した、というお話。

作り方は簡単でtransformである要素をグルっと270°回転させて（スクロールバーが上にあると気持ちが悪いので更にY軸で180°回転）擬似インラインフレーム化し、更にその中の要素を親要素と逆に回転させて綺麗に並べてやれば出来上がり。図などを書けば物凄く簡単に理解できると思いますが、もはやこれは本題ではないので割愛。

始めにつくったやつ

（ちなみに今後のサンプルでは全て、並べてある要素にabsolute指定していますが、それは位置補正を楽にするためです。jsdo.itの表示サイズのせいなのかmacのfirefoxだと少しボケます。jsdo.itに飛んで貰ってフルスクリーンにしてもらえばOKだと思います。）

縦スクロールで横移動 サンプル1 – jsdo.it – share JavaScript, HTML5 and CSS

firefoxだと割りと問題無い気がするんですが、webkit系のブラウザだと、ある位置より下からしかマウスがコンテンツに反応しません。
中の要素全体のheight（表示上では横の長さ）を指定することでなんとかスクロールは出来ていますが、heightを指定しないとスクロールすら出来なくなります。
どうも中の要素を回転させた後に位置を補正したことをイマイチ上手く認識していないような感じです。
サンプルではtranslateで補正していますが、position:absoluteによるtop/leftで補正しても同じでした。

そういうわけで、次に作ったのやつ

縦スクロールで横移動 サンプル2 – jsdo.it – share JavaScript, HTML5 and CSS

回転軸を0,0に指定してみました。
これで前述の問題はクリア出来たようです。
調子に乗ってページ内アンカーを貼ってみたところtranslateで位置を補正してているので当然だめ…？！
webkit系ブラウザだとリンクをクリックするたびにちょっとずつ右に？（構造上は下に？）移動します。どのリンクをクリックしても同じ動作をします。
なんだコレ？

translateではなくposition:absoluteによるtop/leftで補正

縦スクロールで横移動 サンプル3 – jsdo.it – share JavaScript, HTML5 and CSS

firefoxではページ内アンカーが効くようになりましたが、webkit系では上と同じ動作をします。完全に意味がわかりません。
更に気づいている方もいらっしゃると思いますが、webkit系ブラウザだと上に乗っけている「上下スクロールで横移動するよ」という要素からポインターイベントが消えています。
やっぱり意味がわかりません。

そんな訳でnoJSでマウスホイールでスクロールできる横長のコンテンツは出来ないことは無いですが、よくわからないことが沢山あるということがわかりました。

だれか、ちゃんと検証してくれないかなぁ（ﾁﾗｯ

@importが悪い説

「@importが何か駄目なんだろうな」ということは、うちが丸々スタイルシート非表示になる時点で感じていました。うちのstyle.cssには@importでリセットとレイアウトのスタイルシートを呼び出す2行しか書いてないですから。

で、さっそく試してみたところ問題ないんです。
（以下テストを数回行いますので、気になる方はdeCSS3のブックマックレート登録を）
テスト結果→TEST1

別階層の@importが悪い説

では何が原因かと考えてみたところ、うちはWordPerssで構築してますから表示するページとスタイルシートの置き場所が違うわけです。これと前の説を融合させてみればいいのかと思い試してみました。

階層は
フォルダ
├─index.html
└─フォルダ
　　├─style.css
　　└─import.css
です。

テスト結果→TEST2

予想通り駄目です。これが駄目だったのかと。

更なる問題が発生

さて、確認できたし記事にでもしようかと思ってファイルをアップし直したら、何故かバグが直ってしまったかのように見えました。あれ？と確認してみると、なるほど。バグの全容を解明しましたよ。

@importを相対パスで書くと駄目

小見出しの通りですが、@importが相対パスで書かれていた場合、deCSS3をするとスタイルシートからの相対パスではなく、htmlからの相対パスとして読む用になってしまうようです。尚それは、もう一回deCSS3を押しても直りません。

テスト結果→TEST3

このテストの階層は
フォルダ
├─index.html
├─import.css（赤枠黒背景）
└─フォルダ
　　├─style.css
　　└─import.css（青枠白背景）
です。

これで、数ヶ月抱えていた悩みを解決することが出来ました。
みなさんもdeCSS3を使う場合は気をつけて下さい。

タイトル通りなんですが、floatを使わずにカラムが組めたりして便利と噂のdisplay: boxですが、こいつを使ってboxを並べるとFirefoxでcontent-boxが効きません。

そんな訳で検証。

borderもpaddingも指定していないデフォルトのソースはこんな感じ。

#leftBox_c {
width: 100px;
background: #cbf1fa;
height: 100px;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box; /*ちゃんと指定してます*/
box-sizing: content-box;
}

#leftBox_b {
width: 100px;
background: #cbf1fa;
height: 100px;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#rightBox_c {
width: 100px;
background: #ffebea;
height: 100px;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box; /*ちゃんと指定してます*/
box-sizing: content-box;
}

#rightBox_b {
width: 100px;
background: #ffebea;
height: 100px;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

<h1>content-box</h1>
<div id="box">
<div id="rightBox_c">right</div>
<div id="leftBox_c">left</div>
</div>
<h1>border-box</h1>
<div id="box">
<div id="rightBox_b">right</div>
<div id="leftBox_b">left</div>
</div>

すると以下のように表示されます。
尚、Google Chromeと書いてますが、webkitの方がよかったですね。

それぞれのboxにborder:10pxを追加

はい、Firefox側には適応されませんね。

borderのかわりにpadding:10pxを追加

やっぱり、だめです。

もうborder:10px、padding:10px両方追加

はい、当然駄目です。
以上のように、display: boxを使うとFirefoxでcontent-boxが効きません。

解決策

そういったわけで、display: boxを使った場合でもFirefoxでもcontent-boxが効いた風に簡単にするには、ありがちですが、同サイズのdivを入れ子してやります。正直あんまり気に入らない手段ですがね。

ソースとしてはこんな感じ。

#leftBox_c {
border: 10px solid #ff3399;
padding: 10px;
width: 100px;
background: #cbf1fa;
height: 100px;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
}

#leftBox_b {
border: 10px solid #ff3399;
padding: 10px;
width: 100px;
background: #cbf1fa;
height: 100px;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

#rightBox_c {
border: 10px solid #03a6e3;
padding: 10px;
width: 100px;
background: #ffebea;
height: 100px;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
}

#rightBox_b {
border: 10px solid #03a6e3;
padding: 10px;
width: 100px;
background: #ffebea;
height: 100px;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

.inLeftBox { /*これ追加*/
width: 100px; /*親と同じサイズ指定*/
height: 100px;　/*親と同じサイズ指定*/
background: #cbf1fa;
font-size: 12px;
}

.inRightBox { /*これも追加*/
width: 100px;　/*親と同じサイズ指定*/
height: 100px;　/*親と同じサイズ指定*/
font-size: 12px;
background: #ffebea;
}

<div id="box">
<div id="rightBox_c">
<div class="inRightBox"><!--追加した子div-->
border: 10px</div>
</div>
<div id="leftBox_c">
<div class="inLeftBox"><!--追加した子div-->
border: 10px</div>
</div>
</div>
<div id="box">
<div id="rightBox_b">
<div class="inRightBox"><!--追加した子div-->
border: 10px</div>
</div>
<div id="leftBox_b">
<div class="inLeftBox"><!--追加した子div-->
border: 10px</div>
</div>
</div>

すると、以下のように見えます。

見て頂くとわかりますが、これだとFirefoxのcontent-boxに関する問題は解決しますが、当然の如くFireforでのborder-boxでもcontent-boxと同じになりますし、webkitでのborder-boxでは著しく崩れてしまうのでお気をつけを。

おまけ

最後に、ここまでで気付いた方もいるかもしれませんが、webkitではサイズが大きいとその分外にはみ出ますが、Firefoxではboxがそのまま大きくなります。 日本語が下手で何言ってるかよくわからないので、以下で実際ご覧ください。

まぁ、こんな感じです。

そういった訳で、display: boxを使ってboxを並べる場合にはご注意ください。

以上を自分の目でブラウザでちゃんと確認したいという方は→こちら