CSS3翻译％单位？

Question

这是我想要做的事情

一个。我有一个球，其顶边位于其容器顶部下方50％处 湾我想应用一个移动它的翻译它是否位于容器的地板上

这是我试过的

.ball
{
 position:absolute;
 left:25%;
 top:50%;
 height:80px;
 width:80px;
 -webkit-animation:fall 3.4s normal forwards ease-in-out;
}

@-webkit-keyframes fall
{
 0%{-webkit-transform:translateY(0%);}
 100%{-webkit-transform:translateY(100%);}
}

我看到的最终结果是非常意外的 - 使用PicPick像素标尺测量下降的程度表示下降80px，即100％对应于球的高度。通过使用像素单位，我可以让球在我指示的精确像素距离内下降，但这不是我需要做的。

我怀疑我还没有完全理解这里涉及的问题。我非常感谢任何帮助。

Answer 1

简单回答 - 这实际上是正确的行为。如果您想在翻译转换中使用相对单位，请考虑使用viewport length units代替。