Is it possible to rotate characters of a word instead of rotating the whole word using css3

问题

I am trying to transform text in a div using onload window event.

I know that transform: rotate(360deg) scaleX(-1); makes the whole word rotate but I need to rotate the text characters and return them back to their same position while on load.

My fiddle and goin to initialize it in mysite

marked a Answer as right.Still a better answer need!

回答1:

Are you looking for this ?

Running Demo

Encapsule each letter in a <span> element with jQuery;

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

define animation

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

apply animation to span

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

回答2:

Wrap each character in a span (or similar inline tag) and apply the transform to the span. That will visually keep the characters together as a single word, but will allow you to work with the individual characters. Obviously this doesn't scale very well, but as long as you are not trying apply this effect to entire paragraphs, it should do what you're describing.

回答3:

The answer has already been given. I don't know what the OP wants?
lets give him an explanation then...

The css code that is used:

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

So basically what is used here is the @keyframes. It basically creates an animation with frames related to the % of the animation time. after @keyframes is the name of the animation that you'll call.
with animation you can call a speficic animation where you will also give the time the animation will take, in this case 2 seconds.

The html that actually is used here is:

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

So every letter is animated seperately.
at 0% (begin of animation) the scaleX is just normal. At 50% (1 second in this case) the scaleX will be -1, so mirrored. Between this there is an smooth transition so it looks smooth ^^ and then it goes back to normal again at 100%
More info about scaleX and transform here.
However Andrea Ligios does use an automatically generated script, that will place every letter of the word you want to use into a span.

so you can use this easially: