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

Question

我试图在div使用 onload窗口事件中转换文本.

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

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

将答案标记为正确.仍然需要更好的答案!

Answer 1

您在找这个吗？

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;    
   }