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

Posted 2023-03-06

【中文标题】是否可以旋转单词的字符而不是使用 css3 旋转整个单词

【英文标题】：Is it possible to rotate characters of a word instead of rotating the whole word using css3

【发布时间】：2013-09-22 18:24:15

【问题描述】：

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

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

我的fiddle 并在mysite 中初始化它

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

【参考方案1】：

答案已经给出。我不知道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 之后是您将调用的动画的名称。 使用animation，您可以调用特定动画，您还可以在其中给出动画将花费的时间，在本例中为 2 秒。

这里实际用到的html是：

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

所以每个字母都是单独动画的。 在 0%（动画开始）时，scaleX 是正常的。在 50%（本例中为 1 秒）时，scaleX 将为 -1，因此已镜像。在这之间有一个平滑的过渡，所以它看起来很平滑 ^^ 然后它又以 100% 恢复正常 有关 scaleX 和变换的更多信息here。 但是 Andrea Ligios 确实使用了自动生成的脚本，该脚本会将您要使用的单词的每个字母放入一个跨度中。

所以你可以轻松使用它：

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

我希望这是一个体面的解释。 感谢 Andrea Ligios！

【讨论】：

OP 希望确保没有不同的、更好的解决方案。顺便说一句 +1 解释:)

【参考方案2】：

你在找这个吗？

Running Demo

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

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

定义动画

@keyframes rotateText

    0%   transform: scaleX(1); 
    50%  transform: scaleX(-1); 
    100% transform: scaleX(1); 

对 span 应用动画

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

【讨论】：

它在 Chrome 中完美运行。显然你需要添加 webkit 前缀：@-webkit-keyframes、-webkit-transform、-webkit-animation。这是一个 SO 答案，而不是生产代码，我在 FireFox 上工作，所以自己添加它们；）

@VikranthVivek ：您再次删除了已接受的答案标记：D 到底是什么？！另一个错误？ :)

@nkmol 如果可能的话告诉我答案..！

@AndreaLigios 对不起，我需要比这更清楚，如果我不能得到我会给你这个奖.. :)

绝对不是 ;) 我为什么要这样做？如果有人找到更好的方法，我也会学到新的东西

【参考方案3】：

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

【讨论】：

这是可能的，但如果有更多字符，那么在字母之间添加跨度是一项艰巨的任务..

@ArunBertil，jQuery 会很容易地把你变成大力士……看看这里的正则表达式。