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?
In browsers where it's supported, you can now use container units to translate an element by a percentage of the parent width/height.
First set the container-type property of the parent to "size". This enables children to query the parent dimensions.
.parent { container-type: size }
Next translate the child element with cqh (container query height) units. 1cqh equals 1% of the parent height.
/* shift child down by 50% of parent height */
.child { transform: translateY(50cqh) }