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

我正在尝试使用

onload

窗口事件转换

div

中的文本

我知道

变换：旋转（360度）scaleX（-1）使整个单词旋转，但我需要旋转文本字符，并在加载时将它们返回到相同的位置

我的系统将在中初始化它

将答案标记为正确。仍然需要更好的答案
 将每个字符包装在span（或类似的内联标记）中，并将变换应用于span。这将直观地将字符作为单个单词保存在一起，但允许您处理单个字符。显然，这不能很好地扩展，但只要您不尝试将这种效果应用于整个段落，它就应该符合您所描述的内容。
您在寻找这种效果吗


用jQuery将每个字母封装在
元素中

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


将动画应用于跨度

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


答案已经给出。我不知道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之后是要调用的动画的名称
使用，您可以调用一个特殊的动画，您还可以给出动画所需的时间，在本例中为2秒。


此处实际使用的html是：

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


v
我
v
E
K

因此，每个字母都是单独设置动画的
在0%（动画开始）时，scaleX是正常的。在50%（本例中为1秒）时，scaleX将为-1，因此镜像。在这两者之间有一个平滑的过渡，因此它看起来平滑^^^，然后在100%时再次恢复正常

有关scaleX和transform的更多信息。

然而，Andrea Ligios确实使用了一个自动生成的脚本，该脚本将把您要使用的单词的每个字母都放在一个span中

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

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


维韦克

我希望这是一个像样的解释积分归Andrea Ligios
这是可能的，但是如果有更多的字符，那么在字母之间添加跨距是一项艰巨的任务。@ArunBertil，jQuery将很容易把你变成赫拉克勒斯。。。看看这里的正则表达式，它在Chrome中工作得非常好。显然，您需要添加webkit前缀：
@-webkit关键帧
，
-webkit变换
，
-webkit动画
。这是一个很好的答案，不是生产代码，我在FireFox上工作，所以自己添加；）@VikranthVivek：你又删除了被接受的答案标记：D什么鬼东西？！另一个错误？：）@如果可能的话，告诉我答案@安德烈阿利吉奥斯：对不起，我需要更清楚的说明，如果我得不到这个奖，我就给你这个奖：）绝对不是；）我为什么要这样做？如果有人找到更好的方法，我会学到一些新的东西，tooOP希望确保没有不同的、更好的解决方案。顺便说一句，解释如下：）
<div class="start">
  vivek
</div>