Oct
2

Rotating Text with CSS


If you look up you’ll notice I made a small update to the way dates are presented in my headings. It’s not a big change, but I wanted to include the year without increasing the height of the date stamp.

Rotating text to the rescue! Following Jonathan Snook’s article it was easy to implement the few lines of CSS necessary to make this adjustment.

Getting it to look right in IE7 and IE8 was a different matter. In the end I used the *:first-child+html hack for IE7 and the \9 hack for IE 8.

I realize that I should replace these hacks with conditional comments (should I?), but for now they’ll suffice. Also, with a little more research it looks like this IE7/8 hack would have been more elegant.

38 Comments to “Rotating Text with CSS”

  • Felipe October 16, 2011 at 8:38 pm

    Talk of the devil.

  • Blackberry Bold Unlocking October 20, 2011 at 10:59 pm

    This is a terrific website, might you be involved in doing an interview about just how you designed it? If so e-mail me!

  • Clementine Lantry February 22, 2012 at 6:57 pm

    Thank you for another news article. Im really excited I was able to find this article, since so many of the blogs Ive been reading have misleading info.

  • Judi Laferte April 23, 2012 at 9:12 am

    Thank you for the information which will help with my college research paper… You helped me tremendously… Thank You

  • trusses de aluminio May 17, 2012 at 7:09 pm

    This is a very neatly written article.

  • Heath August 1, 2013 at 12:19 am

    Love the music i just find more like them.
    Benny Bessani *

  • steve August 3, 2013 at 3:33 pm

    or could someone tell me how to take the logo off?

  • JOHN KAISER PHD August 3, 2013 at 3:33 pm

    I have been attempting to put in a chat box for my tumblr and every time I paste in my code, it puts it at the top left instead of the top right, and it looks really gross on my blog.
    I’ve tried all that I could to put it to the right side and it’s no use! 🙁
    I was wondering if anyone could help me out?
    All I need is someone to redo the html for me so that it positions to the right and not the left. Or, someone to tell me how to do it.

  • diggn4richez August 20, 2013 at 4:38 am

    Or do I need javascript? I would like blocks of text to change. Eg: I am using a CSS slideshow fade to rotate through images in one section of the page. I would like to have blocks of text change as well. They would be completely independent of the images in terms of speed and duration.
    Can anyone give me an idea of how to achieve this other than creating images of the text and another slideshow?

  • Joe M August 24, 2013 at 3:59 am

    Okay so I’ve been trying for ages to find a border: stuff here; that works in my navigation codes for my layouts on roleplayer.me, I’m still a pretty intermediate coder and can’t by any means code whole websites but I do recreational coding for this. It shows up fine in firefox but not in google chrome and I’ve exhausted my search engine. Help?

    Here’s the codes I’m using:
    a.babe, a.babe:link, a.babe:active, a.babe:visited
    {font-family: georgia; font-size: 10px; font-color: 666666; opacity: 0.5; line-height: 10pt; font-weight: normal; text-decoration:none!important; text-transform: lowercase; width: 10px; background-color: F8F8F8; display:block; padding: 10px; border: 0.5px solid #777777; margin-bottom: 5px; text-align: center; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg);}

    a.babe:hover {opacity: 1; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg);}

    sorry if it’s a bit sloppy.
    I figured it out — sorta, I changed the width from 0.5px to 1px and it showed up. Thanks for trying to help!< 3

  • munir September 5, 2013 at 12:26 am

    ok, my default picture is really long, and i want to take my “about me” stuff that i typed and turn it sideways, is there a way i can do it? to where its like this kinda:

    about me:
    my name is marley
    askljf;alskdfaklsjd;
    klasjflksjdf;lskj
    sajflskjfj;asjdkasj

    but you have to turn your head because the text is sideways, basically just turn the text,. PLEASE HELP!

  • Spider Pc September 6, 2013 at 7:44 am

    How can I rotate text so instead of reading left to right, it is rotated so it reads top to bottom? (rotate 90 degrees text) I’ve seen many solutions, but is there any simple way (cross browser, and consistent) to do this? Thanks

  • Oilers September 8, 2013 at 9:29 am

    ok, i must make a simple rubic cube in 2D !!! in html, i am already finished. As example: when i press the left button, EVERY row wents left, but i want to make that only the klicked row wents left.

    here the code:

    Rubic Cube

    function pfeil_rechts()
    {
    x = document.getElementById(‘A3’).className;
    document.getElementById(‘A3’).className = document.getElementById(‘A2’).className;
    document.getElementById(‘A2’).className = document.getElementById(‘A1’).className;
    document.getElementById(‘A1’).className = x;

    x = document.getElementById(‘A6’).className;
    document.getElementById(‘A6’).className = document.getElementById(‘A5’).className;
    document.getElementById(‘A5’).className = document.getElementById(‘A4’).className;
    document.getElementById(‘A4’).className = x;

    x = document.getElementById(‘A9’).className;
    document.getElementById(‘A9’).className = document.getElementById(‘A8’).className;
    document.getElementById(‘A8’).className = document.getElementById(‘A7’).className;
    document.getElementById(‘A7’).className = x;
    }

    function pfeil_links()
    {
    x = document.getElementById(‘A1’).className;
    document.getElementById(‘A1’).className = document.getElementById(‘A2’).className;
    document.getElementById(‘A2’).className = document.getElementById(‘A3’).className;
    document.getElementById(‘A3’).className = x;

    x = document.getElementById(‘A4’).className;
    document.getElementById(‘A4’).className = document.getElementById(‘A5’).className;
    document.getElementById(‘A5’).className = document.getElementById(‘A6’).className;
    document.getElementById(‘A6’).className = x;

    x = document.getElementById(‘A7’).className;
    document.getElementById(‘A7’).className = document.getElementById(‘A8’).className;
    document.getElementById(‘A8’).className = document.getElementById(‘A9’).className;
    document.getElementById(‘A9’).className = x;
    }

    function pfeil_oben()
    {
    x = document.getElementById(‘A1’).className;
    document.getElementById(‘A1’).className = document.getElementById(‘A4’).className;
    document.getElementById(‘A4’).className = document.getElementById(‘A7’).className;
    document.getElementById(‘A7’).className = x;

    x = document.getElementById(‘A2’).className;
    document.getElementById(‘A2’).className = document.getElementById(‘A5’).className;
    document.getElementById(‘A5’).className = document.getElementById(‘A8’).className;
    document.getElementById(‘A8’).className = x;

    x = document.getElementById(‘A3’).className;
    document.getElementById(‘A3’).className = document.getElementById(‘A6’).className;
    document.getElementById(‘A6’).className = document.getElementById(‘A9’).className;
    document.getElementById(‘A9’).className = x;
    }

    function pfeil_unten()
    {
    x = document.getElementById(‘A7’).className;
    document.getElementById(‘A7’).className = document.getElementById(‘A4’).className;
    document.getElementById(‘A4’).className = document.getElementById(‘A1’).className;
    document.getElementById(‘A1’).className = x;

    x = document.getElementById(‘A8’).className;
    document.getElementById(‘A8’).className = document.getElementById(‘A5’).className;
    document.getElementById(‘A5’).className = document.getElementById(‘A2’).className;
    document.getElementById(‘A2’).className = x;

    x = document.getElementById(‘A9’).className;
    document.getElementById(‘A9’).className = document.getElementById(‘A6’).className;
    document.getElementById(‘A6’).className = document.getElementById(‘A3’).className;
    document.getElementById(‘A3’).className = x;
    }

    <input

  • jdfan September 14, 2013 at 12:43 pm

    I have an image that I am using just for structure on a blogger website. I don’t want to have to load the image in different ways (it is actually a website I am doing for someone else.) Is it possible to rotate the image simply using CSS, HTML or simple JavaScript.

    I am aware that their are some other ways to do it, but since it is in blogger, I would like to limit the complexity I introduce. I’d rather just load an image if it gets to complex, but it was an interesting idea to at least find out if it can be done.

    Thanks

  • Kaylla September 15, 2013 at 4:52 am

    How can I add text over rotating images with CSS like the one on wnet.org. I like the numbers at the top (1-5) and the text and links at the bottom of the pics that are rotating. Thanks for your help/

  • Goe122 September 26, 2013 at 10:49 am

    im new at this so im trying to keep my Ad and top link menu intact on my design and hide everything else. can anyone help me acomplish this please? and how do i go about placing anything on my space on a certain area like my profile picture or the menu? is there a way i can rotate it and place it exactly where i need to onces my final desing is out?

  • Sonny September 26, 2013 at 3:48 pm

    Ok, i admit, i forgot how to do this. Its always the simple things you forget. I have a page im working on and the links are controlled by a stylesheet within the page. I have a row of links that I dont want controlled by that stylesheet but to have different colors. this is the code:

    Top rotating banner | Main front page | Photo page | Link page | Top banner ad | News category

    How do I change it just for these links?

  • henryshensbcglobalnet September 28, 2013 at 11:36 pm

    I am a visual artist attempting to develop my own website of freeway pro 6.
    Does anybody know how I might go about installing my film pieces as moving background images on my pages in a similar manor to that used on the website Goldfrapp.com .//

  • unbleevable39 October 3, 2013 at 4:44 am

    var toggleMenu = {
    init : function(sContainerClass, sHiddenClass) {
    if (!document.getElementById || !document.createTextNode) {return;} // Check for DOM support
    var arrMenus = this.getElementsByClassName(document, ‘ul’, sContainerClass);
    var arrSubMenus, oSubMenu, oLink;
    for (var i = 0; i < arrMenus.length; i++) {
    arrSubMenus = arrMenus[i].getElementsByTagName('ul');
    for (var j = 0; j < arrSubMenus.length; j++) {
    oSubMenu = arrSubMenus[j];
    oLink = oSubMenu.parentNode.getElementsByTagName('p')[0];
    oLink.onclick = function(){toggleMenu.toggle(this.parentNode.getElementsByTagName('ul')[0], sHiddenClass); return false;}
    this.toggle(oSubMenu, sHiddenClass);
    }
    }
    },
    toggle : function(el, sHiddenClass) {
    var oRegExp = new RegExp("(^|\s)" + sHiddenClass + "(\s|$)");
    el.className = (oRegExp.test(el.className)) ? el.className.replace(oRegExp, '') : el.className + ' ' + sHiddenClass; // Add or remove the class name that hides the element
    },
    /* addEvent function from http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html */
    addEvent : function(obj, type, fn) {
    if (obj.addEventListener)
    obj.addEventListener(type, fn, false);
    else if (obj.attachEvent) {
    obj["e"+type+fn] = fn;
    obj[type+fn] = function() {obj["e"+type+fn](window.event);}
    obj.attachEvent("on"+type, obj[type+fn]);
    }
    },
    /*
    Written by Jonathan Snook, http://www.snook.ca/jonathan
    Add-ons by Robert Nyman, http://www.robertnyman.com
    */
    getElementsByClassName : function(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/-/g, "\-");
    var oRegExp = new RegExp("(^|\s)" + strClassName + "(\s|$)");
    var oElement;
    for(var i=0; i<arrElements.length; i++){
    oElement = arrElements[i];
    if(oRegExp.test(oElement.className)){
    arrReturnElements.push(oElement);
    }
    }
    return (arrReturnElements)
    }
    };
    toggleMenu.addEvent(window, 'load', function(){toggleMenu.init('menu','hidden');});

  • homerliveshere October 6, 2013 at 3:44 am

    So I know about using -webkit-transform: rotate(##deg) to rotate text and objects, however my question is when it partially rotates it uses the center as the point of the rotation. Is there a way to change it to the edge so it is like a clockhand (horrible description)?

  • Keaton October 7, 2013 at 11:38 pm

    the content slider is showing up but the images are not loading into it i do believe it is the code, note all image sources and paths are correct.
    if any additional code is required to help me let me know and i will add it, as far as i can tell this is where the problem is.

  • JimT October 8, 2013 at 1:31 am

    I was wondering what the ‘panels’ are called, and how to make them?

    They are on plenty of sites, like Canon USA’s: http://www.usa.canon.com/cusa/home

    I want to just do it with HTML though.

  • easton j October 10, 2013 at 6:56 pm

    Hello everyone I have created a basic PSD web template that I have imported into dreamweaver. My next thing I would like to do is make my logo, a ball shaped logo to spin clockwise as if its loading something but it wont be loading anything just spinning just for the heck of it .. I have no idea where to start…

    Here is my template
    http://i47.tinypic.com/nld4ja.jpg

    Here is my Dreamweaver code for it.

    web2

    #site_layout {
    background-color: #333;
    height: 100%;
    width: 100%;
    }

    I am wanting to make my T logo on the bottom right to rotate as if its loading something as I said. I just don’t know where to insert the script

  • Clayton Cottrell October 14, 2013 at 6:10 am

    I was watching glee and my mum told me that each glee character is from a different Broadway play. Now I wanna know which play each is from.. So please let me know.

  • zaid October 19, 2013 at 5:44 pm

    I recently stumbled across a blog http://psychedelic-vacuum.tumblr.com and as you can see the photos are shaking, I was wondering if anyone knows how I can edit my HTML so my blog does the same?

  • RxP DarkBox October 20, 2013 at 3:36 am

    I would also like photos of all Ironclads and ships of that era. So far all I have found are drawing and model kits no real photos.

  • jdubdoubleu7704 October 20, 2013 at 5:20 am

    Ive heard that you have to use javascript or another language. Is there a way to do this with css? If so how and if not what are some alternative ways. Anything would be helpful.

  • Miguel M October 23, 2013 at 7:11 am

    I am using XHTML 1.0 Strict. I need to know how to rotate text in a Web page, where the text is read properly from bottom to top. I don’t want constantly rotating text, but rather text that is permanently rotated 90 degrees.
    Thanks. It really worked, great. But, with a problem. When I got done entering the code, tested, and validated it, I realized that Internet Explorer had a message that it was blocking ActiveX Controls, after you allow the Controls then it flipped the way I wanted it to. Is there a way to do it automatically without that message and not disabling that message.

  • Brody S October 23, 2013 at 1:37 pm

    CSS = Cascading Style Sheets

    Note: I already know HTML, C, C++, NXC, and AHDL in heavy detail.

    As well, how long do you think it will take me to learn CSS with my existing knowledge?

  • Seth October 23, 2013 at 10:22 pm

    I’ve got a HTML site that is built around a CSS template. I have a single large image on one page where I’d like to display a number of images based on links that are listed on a sidebar on this page. I’d like to design the page so that clicking on a link will display a new image in this single large image’s area (as an output of sorts). To simplify it: it would be like a thumbnail, but with text. It would be considered a hyperlink, but it wouldn’t navigate away from the page, it would simply change this one large image.

    I believe it involved having an ‘active’ image, so when one link is selected, it is considered active, and other links can be select and hence ‘activated’ in the same way, changing the main image.

    Any help with this would be greatly appreciated 🙂

  • Joe M October 24, 2013 at 3:25 am

    Hello, I often see sites that have images and/or graphics at an angle on their site (they’re not going straight up and down like normal pictures), and I was wondering if that was done by a graphics editor or HTML, CSS, JavaScript, etc.?

    If so, please inform me how I could do this, please.

    Thanks!

  • The Beatles November 5, 2013 at 2:44 am

    I am creating a very basic website below is the code I have so far. How would I insert a picture so it was on a slanted angle sitting just on top of the header/navigation bar?

    Any Help thanks 🙂

    div.container
    {
    width:100%;
    margin:1px;
    border:5px solid black;
    line-height:150%;
    }

    ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    background-color:purple;
    }

    li
    {
    float:left;
    }
    a:link,a:visited
    {
    display:block;
    width:150px;
    font-weight:bold;
    color:white;
    background-color:purple;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    color:black;
    background-color:white;
    }

    div.header,div.footer
    {
    padding:1em;

    color:white;
    background-color:purple;
    clear:left;
    }

    h1.header
    {
    padding:0;
    margin:0;
    }

    div.left
    {
    float:left;
    width:160px;
    margin:0;
    padding:1em;
    }

    div.content
    {
    margin-left:190px;
    border-left:1px solid black;
    padding:1em;

    }

    p{
    color:blue;}

    h2{color:purple;

    }

    Web Creation

    Home
    News
    Contact
    About

    Images to go here

    Main Content
    Main content Here first paragrapht
    Main content here second paragraph
    content
    content
    content

    Footer goes here

  • zaclo November 6, 2013 at 11:28 pm

    Hey there!

    I want to be able to make a text field on my website, but one that will display, say “Text Line 1” for 5 seconds, then switch to “Text line 2” for 5 seconds, and go through about 8 of these and then loop back to “Text Line 1.” I don’t want it to scroll, just to appear.

    I have a moderate understanding of HTML, but not Javascript, which I think is what I need.

    Thanks!

  • Gundown64 November 13, 2013 at 12:51 am

    I css good to use for stylesheet when building a website and also what is smarty template, are they similar?

  • krow147 November 16, 2013 at 8:39 pm

    I am working on my website and i have made plenty of nav bars before but this one seems different some how. It wont go horizontal it stays vertical and i can’t figure it out so i copied the code from my html doc and im hoping someone can help, Thanks!

    div.divnav{
    position: relative;
    background: #FFFFFF;
    width: 100%;
    /*-webkit-border-radius: 30px 30px 0px 0px;RADI0US
    border-radius: 30px 30px 0px 0px;*/
    /*-moz-transform: scale(1) rotate(0deg) translate(0px, -50px) skew(0deg, 0deg);
    -webkit-transform: scale(1) rotate(0deg) translate(0px, -50px) skew(0deg, 0deg); RAISE
    -o-transform: scale(1) rotate(0deg) translate(0px, -50px) skew(0deg, 0deg);
    -ms-transform: scale(1) rotate(0deg) translate(0px, -50px) skew(0deg, 0deg);
    transform: scale(1) rotate(0deg) translate(0px, -50px) skew(0deg, 0deg);*/
    }
    ul.navshell{
    position: absolute;
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    width: 100%;
    }
    li [id^=”nav”]{
    display: inline;
    float:left;
    }
    a.anav:link,a.anav:visited
    {
    display:block;
    width:25%;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#000000;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a.anav:hover,a.anav:active
    {
    background-color:#ffffff;
    }

    why
    is
    this
    VERTICAL!!!

  • Jason M November 19, 2013 at 7:23 am

    First off here’s my blog: http://theprincessofparadise.tumblr.com/
    My blog is pretty explicit so please don’t bother if you’re easily offended or in a room full of people 🙂
    Well, I’ve googled it and tried messing around with my theme, but nothing is working. I’m not even sure if it’s possible, but if you do go to my blog, you will see my top lace border, AND I LOVE IT, buuuut!! I’d rather have it on each side of my white post background. I don’t know if anyone knows what I’m talking about, but it’s the white part of my blog, the post background, NOT the pink background, the lace border would obviously have to be rotated. SO PLEASE, If you know how take your time and try to explain to me, or share a link to a tutorial, thank you so much :* If I didn’t make this question clear please let me know so I can edit it! 🙂

  • cardskid22 November 23, 2013 at 9:17 am

    Is there any way to rotate text 90 degrees?

    I’m not just talking about doing something like:

    h
    e
    l
    l
    o

    w
    o
    r
    l
    d

    But actually rotate the letters, like you can in Excel and Word.

  • Matt November 28, 2013 at 2:11 pm

    All the tutorials I find tell me all about CSS, except how to keep my page in the center of a browser page… Can someone tell me how to do this or point me to a tutorial that explains this. Thanks all.