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

前端之家收集整理的这篇文章主要介绍了jquery – 是否可以旋转单词的字符而不是使用css3旋转整个单词前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图使用onload窗口事件转换div中的文本.

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

我的fiddle和goin在mysite初始化它

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

解决方法

你在找这个吗?

Running Demo

>在< span>中封装每个字母.使用jQuery的元素;

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

>定义动画

@keyframes rotateText
{
    0%   {transform: scaleX(1); }
    50%  {transform: scaleX(-1); }
    100% {transform: scaleX(1); }
}

>将动画应用于跨度

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

猜你在找的jQuery相关文章