翻译元素Y轴50％将它向下移动自己的高度的50％，而不是父母高度的50％，如我所料。如何告诉翻译元素基于它在父元素上的翻译百分比？还是我不明白什么？
解决方法
要在translate属性中使用百分比，您必须使用Javascript：
http://jsfiddle.net/4wqEm/27/
<div id="parent">
<div id="children"></div>
</div>
CSS代码：
#parent {
width: 200px;
height: 200px;
background: #ff0;
}
#children {
width: 10%;
height: 10%;
background: #f00;
}
Javascript代码：
parent = document.getElementById('parent');
children = document.getElementById('children');
parent_height = parent.clientHeight;
children_translate = parent_height * 50/100;
children.style.webkitTransform = "translateY("+children_translate+"px)";
我希望我可以帮助你，并说如果你有任何其他问题。