6

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!

3 Answers3

3

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.

cbeckner
  • 1,808
  • 15
  • 17
3

Are you looking for this ?

Running Demo

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

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

  2. define animation 

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

  3. apply animation to span

    .start > span {
    animation: rotateText 2s;    
    display: inline-block;    
}
Andrea Ligios
  • 49,480
  • 26
  • 114
  • 243
  • 5
    It works perfectly in Chrome. Obviously you need to add the webkit prefixes: `@-webkit-keyframes`, `-webkit-transform`, `-webkit-animation`. This is an SO answer, not a production code, and I work on FireFox, so add them by yourself ;) – Andrea Ligios Sep 18 '13 at 10:22
  • @VikranthVivek : you removed the Accepted Answer Mark AGAIN :D what the heck ?! Another mistake ? :) – Andrea Ligios Oct 04 '13 at 13:11
  • @nkmol what if possible tell me the answer..! –  Oct 04 '13 at 13:38
  • @AndreaLigios Sorry,I need more clear than this if i won't get i'l give you this award.. :) –  Oct 04 '13 at 13:39
  • Absolutely not ;) why should I ? If someone find a better way, I'll learn something new too – Andrea Ligios Oct 04 '13 at 13:54
  • @AndreaLigios can you help me for this case http://stackoverflow.com/questions/19244177/retrive-the-checkbox-value-and-how-to-add-the-values-of-checkbox –  Oct 08 '13 at 09:47
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:

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

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

nkmol
  • 8,025
  • 3
  • 30
  • 51