Translate X and Y percentage values based on elements height and width?

Question

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\'

Answer 1

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

HTML code :

    

​​​​​​​​​​​​​

CSS code :

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

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.