Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Center Inside a Transformed (Parallax) Container

Solution: Center Inside a Transformed (Parallax) Container

Let’s center an element inside a transformed container by compensating for parent transforms.

We'll cover the following...

Problem description

A .parallax container sized 400px by 400px has transform: translateY(-50%) applied for a parallax effect. It contains a 50×50px child ...