Hacker News Reader

Noteworthy tidbit about percent values:

There's one thing that makes translate ridiculously powerful, though. Something totally unique in the CSS language.

When we use a percentage value in translate, that percentage refers to the element's own size, not the available space within the parent container.

View on HN

It's unique because in any other context, defining an element's size in terms of its size would be circular. But the transform property works differently: the rendered size is independent from the element's "real" DOM size. This can be seen in the fact that transform doesn't change the flow of the document at all; there's an invisible placeholder element that's still taking up the same space, and only its visual representation is changed. So the latter can be derived from the former without a circular effect. This is also the reason browsers can offload the transform property to the GPU.

Something I love to do with this is create "squishy" buttons that transform:scale(0.9) when under the :active pseudo-class (with a short transition set up for smooth animation). It's extra satisfying on touchscreens.

The first time I've stepped out of the shadows as a lurker just to +1 your comment on "squishy" buttons. I recently saw this technique used on matcha.xyz/blog and I must say I am also a big fan.

Nice, didn’t know that one

Reply on news.ycombinator.com