CSS3の3D transform、三次元回転やperspectiveの実装状況は？

<style type="text/css">
div#blue{
 position: absolute;
 left:150px;
 width: 200px;
 height: 200px;
 border: 4px solid blue;
 background-color: rgba(0,0,255,0.5);
 z-index: 2;
}
div#red{
 position: absolute;
 left:150px;
 width: 200px;
 height: 200px;
 border: 4px solid red;
 background-color: rgba(255,0,0,0.5);
 -webkit-transform: perspective(300) rotateX(30deg);
 -moz-transform: perspective(300) rotateX(30deg);
 -o-transform: perspective(300) rotateX(30deg);
 -ms-transform: perspective(300) rotateX(30deg);
}
</style>
<div style="position: relative; height: 230px;">
  <div id="blue"></div>
  <div id="red"></div>
</div>

← これがおそらく正しい（というか意図と実際が一致する）描画。

現在のところ、iOS版の Safari のみ、このような描画をしてくれます。

← 惜しい感じ。せっかく遠近感を付けたのだから、回転軸から手前の部分が、こちら側に飛び出してほしいのだ。

Mac版の Chrome最新版、Safari最新版ではこのような表示になります。

← rotateX() は効いているけれど、perspective()が 3D ではなく 2D で表現されてしまっています。

Win最新版と、Macちょっと前版の Chrome、Safariでこんな感じ。

← おそらく 3D transform に未対応。

Firefoxや Opera。