Rotate Individual Letters with CSS

September 2025

I'm working on a new page that applies individual CSS classes to each letter. I keep each letter in its own span. Words stay connected by default.

I wanted to add rotation. Apparently, you can't rotate span without doing something like setting them for display: inline-block. That prevents words from sticking together though (i.e. sometimes line breaks will occur in the middle of a word).

I'm working around that by wrapping each word in its own div set to display: inline-flex like this:

CSS

.word {
    display: inline-flex;
}

.word span {
    font-size: 4rem;
    display: inline-block;
    transform-origin: bottom center;
}

.letter-h {
  transform: rotate(3deg);
}

.letter-e {
  transform: rotate(-4deg);
}

.letter-l {
  transform: rotate(-1deg);
}

.letter-o {
  transform: rotate(3deg);
}

HTML

<div class="word">
<span class="letter-h">H</span><span class="letter-e">e</span><span class="letter-l">l</span><span class="letter-l">l</span><span class="letter-o">o</span><span class="letter-h">H</span><span class="letter-e">e</span><span class="letter-l">l</span><span class="letter-l">l</span><span class="letter-o">o</span><span class="letter-h">H</span><span class="letter-e">e</span><span class="letter-l">l</span><span class="letter-l">l</span><span class="letter-o">o</span><span class="letter-h">H</span><span class="letter-e">e</span><span class="letter-l">l</span><span class="letter-l">l</span><span class="letter-o">o</span><span class="letter-h">H</span><span class="letter-e">e</span><span class="letter-l">l</span><span class="letter-l">l</span><span class="letter-o">o</span><span class="letter-h">H</span><span class="letter-e">e</span><span class="letter-l">l</span><span class="letter-l">l</span><span class="letter-o">o</span><span class="letter-h">H</span><span class="letter-e">e</span><span class="letter-l">l</span><span class="letter-l">l</span><span class="letter-o">o</span>
</div>

Output

HelloHelloHelloHelloHelloHelloHello

end of line

Endnotes

Yeah, that word breaks out of the side of the content wrapper. That's the point. I want to make sure it doesn't break in lines in the middle of the text.