`transform` Establishes Containing Block for Descendants

Wei Gao on March 02, 2019

A problem came up when I was trying to draw a heart using CSS following this guide. You draw a box first. And then you draw two circles attached t... [Read Full]
markdown guide
 

I really like the write-up, the process of exploring specs and behaviour is super fun. Also, I had no idea that transform does that! I'm now wondering to go through some of my past projects and see if I ever implicitly relied on it.

 

Thanks! I'm reading the specs recently so likely I'll be writing more with similar fashion :]

Would you also like to write some posts under #specsreading to make this topic more active? I'm doing this because I find reading the specs so helpful and I really want to share about this process itself, too.

 

#specsreading sounds good, I'll see what I can add from my explorations!

 

You say:

.heart {
  transform: rotate(-45deg);
}

But I keep reading:

.ice-cream {
  transform: rotate(-45deg);
}
 

Haha yeah after looking at it for so long it starts to look like other things to me as well like .ice-cream 🍦

code of conduct - report abuse