Question

I’m trying to rotate an arrow so it faces down, but not sure if this is possible

HTML

<a href="/test/">test <span id="rotate">&raquo;</span></a>

CSS

span#rotate{ 
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Answer 1

If you want to keep the element behaving like the inline span that it is, but also want to rotate it, then you will need to use display: inline-block; on it. This won’t force it to a new line like display: block; naturally would.

Here is the correct code (jsFiddle: http://jsfiddle.net/joshnh/wZpP9/):

span#rotate{
    display: inline-block;
    *display: inline; /* Used to get IE 6 & 7 to behave */
    zoom: 1; /* Used to get IE 6 & 7 to behave */
    -webkit-transform: rotate(90deg); 
       -moz-transform: rotate(90deg); 
        -ms-transform: rotate(90deg); 
         -o-transform: rotate(90deg);  
            transform: rotate(90deg);
               filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); 
}