Animate CSS Text To Go From Horizontal To Vertical With Upright Text

April 29, 2022

So I have an acronym that is displayed horizontally in the middle of the screen then an animation plays the flips is vertically. The only problem is I can’t get it to rotate individual letters once it is made vertically so the text is all top to bottom rather then left to right.

Below is what I currently have: https://noahark.w3spaces.com/saved-from-Tryit-2022-04-29.html

<!DOCTYPE html>
<html>
<head>
<style> 
.move{
    font-size: 105px;
    position: relative;
    animation: mover 5s ease 0s normal forwards; 
}

.move span
{
    position: relative;
    animation: rotate 5s ease 0s normal forwards; 
}

@keyframes mover {
0.0%{
        transform: scale(1) translate(-0px, 0) skew(0deg);
    }
100%{
         transform: scale(1) translate(-20%, 300px) skew(0deg) rotate(90deg);
    }
    
}

@keyframes rotate
{
0.0%{
        transform: scale(1) translate(-0px, 0) skew(0deg);
    }
100%{
         transform: scale(1) translate(0px, 0px) skew(0deg) rotate(-90deg);
        
    }
}

</style>
</head>
<body>

<CENTER>
<h2 class="move">

<span>L</span>
<span>E</span>
<span>M</span>
<span>O</span>
<span>N</span>

</h2> 
</CENTER>


</body>
</html>

Basically just need all the letters to flip to correct orientation (Left to right) at end while still remain vertical.

Like this

L
E
M
O
N

All help is very appreciated!

>Solution :

This snippet is an exact copy of yours except the spans are made inline-block so they obey the transform:

<!DOCTYPE html>
<html>

<head>
  <style>
    .move {
      font-size: 105px;
      position: relative;
      animation: mover 5s ease 0s normal forwards;
    }
    
    .move span {
      position: relative;
      display: inline-block;
      animation: rotate 5s ease 0s normal forwards;
    }
    
    @keyframes mover {
      0.0% {
        transform: scale(1) translate(-0px, 0) skew(0deg);
      }
      100% {
        transform: scale(1) translate(-20%, 300px) skew(0deg) rotate(90deg);
      }
    }
    
    @keyframes rotate {
      0.0% {
        transform: scale(1) translate(-0px, 0) skew(0deg);
      }
      100% {
        transform: scale(1) translate(0px, 0px) skew(0deg) rotate(-90deg);
      }
    }
  </style>
</head>

<body>

  <CENTER>
    <h2 class="move">

      <span>L</span>
      <span>E</span>
      <span>M</span>
      <span>O</span>
      <span>N</span>

    </h2>
  </CENTER>


</body>

</html>