Question

I’m applying this css class:

.turn90{
-moz-transform: rotate(90deg);  /* FF3.5+ */
-o-transform: rotate(90deg);  /* Opera 10.5 */
-webkit-transform: rotate(90deg);  /* Saf3.1+, Chrome */
filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=1);  /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; /* IE8 */
}

via:

document.getElementById("advancedsearchtoggle").className += " turn90"; 

It works sufficiently in Firefox and Opera, but not in Safari or Chrome. (Haven’t tried IE yet)

What am I doing wrong?

The Complete JavaScript function:

    var expanded=0;
    function searchparts(n)
    {
        if(expanded == 0){
            document.getElementById('search2').style.visibility = 'visible'; 
            document.getElementById('search3').style.visibility = 'visible'; 
            document.getElementById('search2').style.display = 'block'; 
            document.getElementById('search3').style.display = 'block'; 
            //window.scrollTo(0,findPos(document.getElementById('search'+n))-60);
            document.getElementById("advancedsearchtoggle").className += " turn90"; 
            document.getElementById('advancedsearchtoggle').style['-webkit-transform'] = 'rotate(90deg)';

            expanded = 1;   
        }else if(expanded == 1){
            document.getElementById('search2').style.visibility = 'collapse'; 
            document.getElementById('search3').style.visibility = 'collapse'; 
            document.getElementById('search2').style.display = 'none'; 
            document.getElementById('search3').style.display = 'none';
            window.scrollTo(0,findPos(document.getElementById('search1'))-60);
            document.getElementById("advancedsearchtoggle").className = " ";    
            document.getElementById('advancedsearchtoggle').style.webkitTransform = 'rotate(-90deg)'; 

            expanded = 0;   
        }
    }

This is the HTML that triggers the javascript:

<a class="plain" onclick="searchparts(2);" style="margin-right:20px;"><span style="text-decoration:underline;">Erweiterte Suche</span> <span id="advancedsearchtoggle" style="text-decoration:none;">&raquo;</span></a>

As you can see, even when putting

document.getElementById('advancedsearchtoggle').style['-webkit-transform'] = 'rotate(90deg)';

directly into the javascript, it doesn’t work. When I inspect the “advancedsearchtoggle”, I can see that the class get’s applied correctly (and any other css I put into the class). Just the rotate doesn’t seem to work in Safari & Chrome.

Answer 1

I think Webkit just doesn’t support rotation on < span > tags yet. Remember, vendor-prefix CSS are called “experimental” for a reason.

It does seem to support rotation on tags like div, p, or h1, but I noticed that when I first tried doing this, the symbol disappeared because you need to define a height and width large enough so that the rotated element will fit inside.

For example, you can change the span tag to this:

<p id="advancedsearchtoggle" style="width: 10px; height: 10px; text-decoration:none;">&raquo;</p>

which works to some extent, but it may be unpredictable if you don’t know the dimensions of the text being rotated.

You might be able to find another HTML text tag that rotates properly in Webkit, or do some javascript to determine the height and width of the text you need to rotate…