css - 如何计算转换后的div的绝对位置

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

好的，你应该添加一个标签:'geometry'。 首先，记住正弦和余弦，然后拿一个计算器: 绕x轴旋转45度
45 的 cos 大约是 0,7，那么//45 度的 cos 值
0.7*150=106 //变换后矩形的高度
(150-106)/2 //父元素上下剩余的空间除以2
结果是 22，这是您需要的正顶部或负底部。

第二个 block 相同:(250-(0.7*250))/2 = 37.5

请记住，如果您更改 Angular 值，请重新计算 Angular 值。数字越四舍五入，您就越准确。请记住，许多标签的计算量可能很大。