是否可以旋转单词的字符而不是使用css3旋转整个单词
我试图使用onload窗口事件转换div文本。
我知道transform: rotate(360deg) scaleX(-1); 使整个单词旋转，但我需要旋转文本字符并在加载时将它们返回到相同的位置。
我的小提琴，并在mysite初始化它
将答案标记为正确。仍然需要更好的答案！
你在找这个吗？
运行演示
-
用jQuery封装
元素中的每个字母;$(".start").html($(".start").html().replace(/./g, "$&")); -
定义动画
@keyframes rotateText { 0% {transform: scaleX(1); } 50% {transform: scaleX(-1); } 100% {transform: scaleX(1); } } -
将动画应用于跨度
.start > span { animation: rotateText 2s; display: inline-block; }
将跨度（或类似的内联标记）中的每个字符换行并将变换应用于跨度。 这将在视觉上将字符保持为一个单词，但允许您使用单个字符。 显然这不能很好地扩展，但只要你没有尝试将这个效果应用于整个段落，它应该做你所描述的。
答案已经给出。 我不知道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之后是您要调用的动画的名称。
使用动画，你可以调用一个特殊动画，你也可以给动画带来时间，在这种情况下为2秒。
这里实际使用的html是：
v i v e k
所以每个字母都是单独动画的。
在0％（动画开始），scaleX正常。 在50％（在这种情况下为1秒），scaleX将为-1，因此镜像。 在这之间有一个平滑的过渡，所以它看起来很光滑^^然后它再次恢复正常100％
有关scaleX和转换的更多信息，请点击此处
然而， Andrea Ligios确实使用了一个自动生成的脚本，该脚本会将您想要使用的单词的每个字母放入一个范围内。
所以你可以轻松地使用它：
vivek
我希望这是一个体面的言论。 积分归Andrea Ligios所有！