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

我试图使用onload窗口事件转换div文本。

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

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

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

Answer 1

你在找这个吗？

运行演示

1. 用jQuery封装元素中的每个字母;

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

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

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

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是：

 
 v i v e k  

所以每个字母都是单独动画的。
在0％（动画开始），scaleX正常。 在50％（在这种情况下为1秒），scaleX将为-1，因此镜像。 在这之间有一个平滑的过渡，所以它看起来很光滑^^然后它再次恢复正常100％
有关scaleX和转换的更多信息，请点击此处
然而， Andrea Ligios确实使用了一个自动生成的脚本，该脚本会将您想要使用的单词的每个字母放入一个范围内。

所以你可以轻松地使用它：

 
 vivek  

我希望这是一个体面的言论。 积分归Andrea Ligios所有！