0

当您transform在 div 上使用时，绝对定位不再像您预期的那样工作，并且似乎需要手动计算。例如，当您希望 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计算正确的底部位置？

4

2 回答 2

0

好的，你应该添加一个标签：'几何'。首先，记住正弦和余弦，然后用计算器：绕 x 轴旋转 45 度 45
的余弦大约是 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

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

于 2013-06-01T16:57:45.597 回答
0

这是一个要检查的小提琴，让我知道这是否是您想要的？

.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 */
}
于 2013-06-01T16:03:43.930 回答