css - 変換されたdivの絶対位置を計算する方法

Question

divで使用するtransformと、絶対配置が期待どおりに機能しなくなり、手動で計算する必要があるようです。たとえば、div をコンテナーの下部に配置する場合は、次のようにします。

div{
    position:absolute;
    bottom:0%;
}

ただし、この div を変換する-webkit-transform:rotateX(angle);と、コンテナーの下部にはなりません。コンテナの中間の場所は、そのサイズによって異なります。

これを説明するために jsfiddle を作成し、達成しようとしていることも示します: http://jsfiddle.net/9NHJt/

私が使用するコードは次のとおりです。

<div class="container"> height: 150px;
    <div class="inner"></div>
</div>

<div class="container" style="height:250px"> height: 250px;
    <div class="inner"></div>
</div>

<div class="container"> desired result
    <div class="inner" style="bottom:-19px"></div>
</div>


.container{
    margin-top:30px;
    position:relative;
    width:500px;
    height:150px;
    -webkit-perspective:1000px;
    border:1px solid black
}

.inner{
    -webkit-transform:rotateX(45deg);
    background:rgba(238, 238, 238, 0.8);
    border:1px dashed black;
    position:absolute;    
    width:100%;
    height:100%;
    bottom:0%; /* Needs to be calculated */
}

それで、javascriptなしでこれを修正する方法はありますか? または、jsで正しいボトム位置を計算する方法は?