如何计算变换后的曲面的绝对位置

当您在div上使用transform时，绝对定位不再像您预期的那样工作，似乎需要手动计算。例如，当您希望div位于容器的底部时，您可以这样做：

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

但如果您像-webkit-transform:rotateX(angle);那样转换此div，它将不会位于容器的底部。容器之间的位置取决于其大小。

我创建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 */
}

那么，有没有办法在不使用Java脚本的情况下解决这个问题？或者如何用js计算正确的底部位置？

---

解决方案

好的，您应该添加一个标记：‘Geomety’。 首先，记住正弦和余弦，然后带上计算器： 绕X-ASIS旋转45度
45的cos约为0，7，然后//value of cos for 45 degrees
0.7*150=106//the height of the rectangle afther transformation
(150-106)/2//the space remaining in the parent up and down the element divided by 2
结果是22，这是您需要的正数顶部或负数底部。

第二块相同：(250-(0.7*250))/2=37.5

记住，如果您更改角度的值，请重新计算它。数字越四舍五入，你就越准确。请记住，对于许多标记，计算可能会很繁重。