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

Question

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

I know that transform: rotate(360deg) scaleX(-1); makes th

Answer 1

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:

    v
    i
    v
    e
    k

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:

  vivek

I hope this is a decent explenation. Credits goes to Andrea Ligios!