Question

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

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

我的fiddle并在mysite

中进行初始化

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

Answer 1

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

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

将动画应用于范围

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

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之后是你要调用的动画的名称。
使用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和transform here的更多信息。
然而 Andrea Ligios 确实使用了自动生成的脚本，该脚本会将您想要使用的单词的每个字母放入一个范围内。

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

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

我希望这是一次体面的表达。 积分归Andrea Ligios所有！

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

3 个答案: