css3 – 根据元素高度和宽度翻译X和Y百分比值?

前端之家收集整理的这篇文章主要介绍了css3 – 根据元素高度和宽度翻译X和Y百分比值?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
翻译元素Y轴50%将它向下移动自己的高度的50%,而不是父母高度的50%,如我所料。如何告诉翻译元素基于它在父元素上的翻译百分比?还是我不明白什么?

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

解决方法

要在translate属性中使用百分比,您必须使用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代码

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

我希望我可以帮助你,并说如果你有任何其他问题。

猜你在找的CSS相关文章