Question

在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 */
}

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

Answer 1

这是一个Fiddle来检查，如果这是你想要的，请告诉我？

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

Answer 2

好的，你应该添加一个标签：'geometry'。首先，记住正弦和余弦，然后拿一个计算器：围绕x辅助旋转是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

如果更改角度，请记住重新计算角度值。数字越圆，你就越准确。请记住，许多标签的校正可能很重。

如何计算变换div的绝对位置

2 个答案: