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

Question

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

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

我的小提琴并开始在mysite中初始化它

将答案标记为正确。仍然需要更好的答案！

Answer 1

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

Answer 2

你在找这个吗？

Running Demo

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 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% 的速度恢复正常。
但是Andrea Ligios确实使用了一个自动生成的脚本，它将您想要使用的单词的每个字母都放在一个跨度中。

所以你可以很容易地使用它：

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

我希望这是一个体面的解释。归功于 Andrea Ligios！