动画 CSS 文本从水平到垂直，文本竖直

Question

所以我有一个首字母缩写词，水平显示在屏幕中间，然后动画播放垂直翻转。唯一的问题是，一旦它被垂直制作，我就无法让它旋转单个字母，所以文本都是从上到下而不是从左到右。

以下是我目前拥有的：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>

基本上只需要所有的字母在最后翻转到正确的方向（从左到右），同时仍然保持垂直。

像这样

L
E
M
O
N

非常感谢所有帮助！

Answer 1

此代码段与您的完全相同，只是制作了跨度 inline-block，因此它们遵循转换：

<!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>

动画 CSS 文本从水平到垂直，文本竖直

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

html

css

jquery-animate