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

Question

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

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

我的fiddle 并在mysite 中初始化它

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

Answer 1

答案已经给出。我不知道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 之后是您将调用的动画的名称。
使用animation，您可以调用特定动画，您还可以在其中给出动画将花费的时间，在本例中为 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 和变换的更多信息here。
但是 Andrea Ligios 确实使用了自动生成的脚本，该脚本会将您要使用的单词的每个字母放入一个跨度中。

所以你可以轻松使用它：

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

我希望这是一个体面的解释。 感谢 Andrea Ligios！

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. 对 span 应用动画

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

Answer 3

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