Animate individual letters in a title on hover in HTML

I have a title on my website and want to animate the letters when hovering over it with the mouse. Here is the relevant snippets of what I have so far:

.title-text {
  color: #000000;
}
.title-text span:hover {
  color: #ff0000;
}

<h1 class="title-text">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</h1>

This works fine and individual letters turn red on hover. However, I can’t seem to rotate individual letters, I tried everything from a simple rotate: 45deg; to an animation with KeyFrames but nothing happens. How can I animate the letters on hover?

>Solution :

To apply transforms you need to use a block level element, spans are naturally inline and can’t be rotated:

.title-text {
  color: #000000;
}

.title-text span {
  display: inline-block;
  transition: transform 1s;
}

.title-text span:hover {
  transform: rotate(45deg);
}

<h1 class="title-text">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</h1>