基于元素高度和宽度翻译X和Y百分比值？ [英] Translate X and Y percentage values based on elements height and width?

问题描述

翻译元素Y轴50％会将其向下移动其自身高度的50％，而不是父母高度的50％。如何告诉翻译元素基于它在父元素上的翻译百分比？还是我不懂事？

Translating an elements Y axis 50% will move it down 50% of its own height, not 50% of the parents height as I would expect. How do I tell a translating element to base it's translation percentage on the parent element? Or am I not understanding something?

http://jsfiddle.net/4wqEm / 2 /

推荐答案

要在translate属性中使用百分比，必须使用Javascript：http://jsfiddle.net/4wqEm/27/

To use percentage in the translate property, you have to use Javascript : http://jsfiddle.net/4wqEm/27/

HTML代码：

<div id="parent">
    <div id="children"></div>
</div>​​​​​​​​​​​​​

CSS代码：

#parent {
    width: 200px;
    height: 200px;
    background: #ff0;
}
#children {
    width: 10%;
    height: 10%;
    background: #f00;
}

Javascript代码：

Javascript code :

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)";​​​​​​​​​​​​​​​​​​​​​​​​​​

我希望我能帮助你，如果你有其他问题，请告诉我。

I hope I could help you and say me if you have any other problem.

这篇关于基于元素高度和宽度翻译X和Y百分比值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！