CSS3のrotateY/rotateXをするとマウスオーバーの判定ができなくなる問題

rotateY()した要素のマウスオーバー判定がおかしい

CSS3でY軸回転させた要素をマウスオーバー時に回転を戻すという処理を行いたかったのだが、どうもrotateY()で回転させた要素に対してマウスオーバーの判定がうまくいかない。
まったく効かないのではなく、回転によって奥側になった部分だけ判定が効かない。
また、Firefoxではこの問題が発生しない。

下記のコードで再現できる。

再現HTML
<div id="container">
    <div class="rect"></div>
</div>

再現CSS

.rect {

    display: inline-block;

    background-color: red;

    width: 200px;

    height: 200px;

    -webkit-transition: -webkit-transform 0.2s;

    -webkit-transform: perspective(300px) rotateY(30deg);

}

.rect:hover {

    -webkit-transform: perspective(300px) rotateY(0deg);

}

translateZ()とscale()で無理やり解決

どうもwebkitの動作でZ座標が0以下の要素にはマウスオーバーの判定が発生しないよう。

仕方ないのでtranslateZ()で回転しても要素のz座標がすべて0以上に収まるように要素を移動し、scale()でサイズを調整することで対応した。

修正後のCSS

.rect {

    display: inline-block;

    background-color: red;

    width: 200px;

    height: 200px;

    -webkit-transition: -webkit-transform 0.2s;

    -webkit-transform: perspective(300px) rotateY(30deg) translateZ(100px) scale(0.8);

}

.rect:hover {

    -webkit-transform: perspective(300px) rotateY(0deg) scale(0.8);

}