基于元素高度和宽度翻译X和Y百分比值? [英] Translate X and Y percentage values based on elements height and width?
本文介绍了基于元素高度和宽度翻译X和Y百分比值?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
翻译元素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屋!
查看全文