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で正しいボトム位置を計算する方法は?