是否可以使用 css3 旋转单词的字符而不是旋转整个单词

Question

我正在尝试使用窗口事件转换onload div中的文本。

我知道transform: rotate(360deg) scaleX(-1);使整个单词旋转，但我需要旋转文本字符并在加载时将它们返回到相同的位置。

我的小提琴和去在我的网站初始化它

将答案标记为正确。还是更好的答案需要！

Answer 1

你在找这个吗？

运行演示

1. 使用 jQuery 将每个字母封装在 <span> 元素中;

   $(".start").html($(".start").html().replace(/./g, "<span>$&</span>"));
   

2. 定义动画

   @keyframes rotateText
   {
       0%   {transform: scaleX(1); }
       50%  {transform: scaleX(-1); }
       100% {transform: scaleX(1); }
   }
   

3. 将动画应用于跨度

   .start > span {
       animation: rotateText 2s;    
       display: inline-block;    
   }
   

Answer 2

将每个字符包装在 span（或类似的内联标记）中，并将转换应用于 span。 这将在视觉上将字符作为一个单词放在一起，但允许您使用单个字符。 显然，这不能很好地缩放，但只要您不尝试将此效果应用于整个段落，它就应该按照您的描述进行操作。

Answer 3

答案已经给出。我不知道OP想要什么？
让我们给他一个解释...
使用的 css 代码：

@-webkit-keyframes rotateText
{  
    0%   {-webkit-transform: scaleX(1); }
    50%  {-webkit-transform: scaleX(-1); }
    100% {-webkit-transform: scaleX(1); }
}
@keyframes rotateText
{
    0%   {transform: scaleX(1); }
    50%  {transform: scaleX(-1); }
    100% {transform: scaleX(1); }
}
.start > span {
    animation: rotateText 2s;  
    -webkit-animation: rotateText 2s;
    display: inline-block;    
}

所以基本上这里使用的就是@keyframes。它基本上创建一个动画，其中包含与动画时间百分比相关的帧。@keyframes之后是要调用的动画的名称。
对于动画，您可以调用特定动画，其中您还将给出动画将花费的时间，在本例中为 2 秒.

这里实际使用的 html 是：

<div class="start">
    <span>v</span>
    <span>i</span>
    <span>v</span>
    <span>e</span>
    <span>k</span>
</div>

因此，每个字母都是单独动画的。
在 0%（动画开始）时，scaleX 是正常的。在 50%（在本例中为 1 秒）时，scaleX 将为 -1，因此镜像。在这之间有一个平滑的过渡，所以它看起来很平滑^^然后它又以 100%
恢复正常有关 scaleX 和转换的更多信息，请参阅此处。
然而，Andrea Ligios确实使用了一个自动生成的脚本，它会将你想使用的单词的每个字母都放在一个范围内。

因此，您可以轻松使用它：

<div class="start">
  vivek
</div>

我希望这是一个体面的解释。学分归安德里亚·利吉奥斯！