Problem: Center Inside a Transformed (Parallax) Container
Problem description
A .parallax container sized 400px by 400px has transform: translateY(-50%) applied for a parallax effect. It contains a 50×50px child .child. The task is to center .child at the container’s original center point (before translation) without extra wrappers or JavaScript.
Goal
Place the .child element at the midpoint of the container’s original (pretransform) position.
Constraints
Only CSS may be modified; adding HTML wrappers or JavaScript is not allowed.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.
Problem: Center Inside a Transformed (Parallax) Container
Problem description
A .parallax container sized 400px by 400px has transform: translateY(-50%) applied for a parallax effect. It contains a 50×50px child .child. The task is to center .child at the container’s original center point (before translation) without extra wrappers or JavaScript.
Goal
Place the .child element at the midpoint of the container’s original (pretransform) position.
Constraints
Only CSS may be modified; adding HTML wrappers or JavaScript is not allowed.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.