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

Question

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

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

我的 fiddle并在 mysite 中初始化它

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

Answer 1

你在找这个吗？

Running Demo

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

   $(".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;    
   }