TheOverAnalyzed

By

Rotating Text with CSS

Upside-down flag emoji
Upside-down flag emoji

You know that flag emoji (🇺🇸) from a couple posts ago?

Wonder how I got it to rotate like the House of Cards graphic?

Easy. CSS3!

  1. I wrapped the flag emoji (🇺🇸) in a <span> tag and applied an inline style rule[1]

  2. Next, I used the CSS3 property transform[2] with the rotate: (); value like so:

    transform: rotate(-180deg);

  3. This didn’t work.

    The result for the following markup

    I know who I'm voting for <span style="transform: rotate(-180deg);">🇺🇸</span>

    was

    I know who I’m voting for 🇺🇸

    The flag wasn’t upside-down as I had hoped.

    What was the problem?

  4. Turns Outâ„¢ I needed to force the desired-text-to-be-rotated to inline-block (or block), because <span> is, by definition, an inline element

    It’s wonky to expect the flag emoji (🇺🇸) to rotate when it’s still the child of a <p> that is not styled to rotate.

  5. So, I applied the display property with the value inline-block and added it to the markup like so

    I know who I'm voting for <span style="display: inline-block; transform: rotate(-180deg);">🇺🇸</span>

    resulting in

    I know who I’m voting for 🇺🇸

  1. I did this because it’s not worth adding a custom class to my main stylesheet just for this one random style change. ↩

  2. Technically, I should have used the -webkit prefix ala -webkit-transform, but I’m lazy, and I’m pretty sure the transform property has been adopted by most every browser that matters. So why add additional prefix cruft when it’s more or less unnecessary? ↩