www.webdeveloper.com
Results 1 to 10 of 10

Thread: CSS animation : rotating text possible?

  1. #1
    Join Date
    Jun 2014
    Posts
    5

    Question CSS animation : rotating text possible?

    Is it possible to have a *text* rotating using CSS animations? I tried the following (on Google Chrome), but it turns out to not become animated:


    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
    background: red;
    position: relative;
    -webkit-animation: rot 15s infinite;
    }

    @-webkit-keyframes rot {
    from {transform: rotate(0deg);}
    to {transform: rotate(-180deg);}
    }

    </style>
    </head>
    <body>

    <div>A</div>

    </body>
    </html>

  2. #2
    Join Date
    Jun 2014
    Location
    North Carolina, USA
    Posts
    8
    See if this helps, I would suggest you use w3schools as a reference tool as it is very useful.

    http://www.w3schools.com/cssref/css3_pr_transform.asp

  3. #3
    Join Date
    Apr 2014
    Posts
    56
    You should check "writing-mode" CSS property. Well, at present this won't work ideally, but eventually should be implemented in all browsers

  4. #4
    Join Date
    Jun 2014
    Posts
    5
    Quote Originally Posted by DevenDoes View Post
    See if this helps, I would suggest you use w3schools as a reference tool as it is very useful.

    http://www.w3schools.com/cssref/css3_pr_transform.asp
    I'm always using w3school, and I know the page you are referring to - after all, I patterned my example after those given in the w3school examples. However, this didn't help me in understanding why my example doesn't work.

  5. #5
    Join Date
    Jun 2014
    Posts
    5
    Quote Originally Posted by kred View Post
    You should check "writing-mode" CSS property. Well, at present this won't work ideally, but eventually should be implemented in all browsers
    As far I understand, writing-mode just gives the writing direction (for example, right-to-left), so I don't see how this would help me here.

    Could it be that rotating text is not supported at all, and I would have to create an image from the text, and report the image?

  6. #6
    Join Date
    Jun 2014
    Posts
    5
    Quote Originally Posted by DevenDoes View Post
    See if this helps, I would suggest you use w3schools as a reference tool as it is very useful.

    http://www.w3schools.com/cssref/css3_pr_transform.asp
    I did use w3school (actually, I patterened my CSS according to some examples I found there), and I also know the page you mentioned. Still, I don't see what I did wrong in *my* example. Can you spot my error?

  7. #7
    Join Date
    Jun 2014
    Location
    North Carolina, USA
    Posts
    8
    Hey, I apologize for my ignorance of not checking to see if your code was along the lines of theirs, I thought you were more so looking for an example to help guide you. From some testing I found that this works on all browsers.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div
    {
    width:200px;
    height:100px;
    background-color:yellow;
    /* Rotate div */
    transform:rotate(100deg);
    -ms-transform:rotate(100deg); /* IE 9 */
    -webkit-transform:rotate(100deg); /* Opera, Chrome, and Safari */
    }
    </style>
    </head>
    <body>

    <div>Hello</div>

    </body>
    </html>

    As long as you enter the same degrees for each spot you can it should work. If not let me know and I will continue to assist you.

  8. #8
    Join Date
    May 2014
    Posts
    936
    Laughing at the responses so far, as your problem is QUITE obvious.

    You are declaring the non-CSS3 non W3C vendor specific version for the webkit engine ONLY -- that means your code will only work in Safari and pre-"blink" versions of Chrome. If you see -webkit or -moz or -ms, those are vendor specific implementations, NOT actual specification CSS! Inside your -webkit-keyframes to even work in Safari/Chrome you actually need to say -webkit-transform to have it work in those browsers -- you want it in FF prior to version 21 you need -moz-, and for every other browser you don't use any vendor prefix.

    Code:
    div {
    	background: red;
    	position: relative;
    	-webkit-animation: rot 15s infinite; 
    	-moz-animation: rot 15s infinite; 
    	animation: rot 15s infinite; 
    }
    
    @-webkit-keyframes rot {
    	from {-webkit-transform: rotate(0deg);}
    	to {-webkit-transform: rotate(-180deg);}
    }
    
    @-moz-keyframes rot {
    	from {-moz-transform: rotate(0deg);}
    	to {-moz-transform: rotate(-180deg);}
    }
    
    @keyframes rot {
    	from {transform: rotate(0deg);}
    	to {transform: rotate(-180deg);}
    }
    Also beware that keyframes is not supported in IE9/earlier... But really that's all you need to do. -webkit version, -moz version, no prefix version, done.

    There are STILL a lot of web-rot tutorials out there that call the vendor prefix versions CSS3, I've seen some that only show the -webkit version as if Safari and Chrome are the only browsers in existence... Bunch of BS.

    Hope this helps.
    Java is to JavaScript as Ham is to Hamburger.

  9. #9
    Join Date
    Jun 2014
    Posts
    5
    Quote Originally Posted by deathshadow View Post
    Laughing at the responses so far, as your problem is QUITE obvious.

    You are declaring the non-CSS3 non W3C vendor specific version for the webkit engine ONLY
    Yes, I know. I thought that for *this* discussion it should not matter, because I am testing it on Chrome right now, so -webkit should be fine. In the final application, I would use SCSS to generate the correct styles for all versions.

    I did not know, however, that in this case I also have to use -webkit-transform inside the keyframe! In any case, your example works, and I can continue from there. Thanks a lot.

  10. #10
    Join Date
    Jun 2014
    Posts
    9
    Rotate the text is possible in this method.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles