csstranslatepercentagetranslate3d

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


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/


Solution

  • 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) }