Die Anwendung der css-Klasse mit webkit-transform funktioniert nicht in Safari oder Chrome

Ich bin mit der Anwendung dieser css-Klasse:

.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"; 

Funktioniert es ausreichend in Firefox und Opera, aber nicht in Safari oder Chrome. (Habe nicht versucht, den IE noch)

Was mache ich falsch?

Die Komplette JavaScript-Funktion:

    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;   
        }
    }

Dies ist die HTML-Trigger, die das 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>

Wie Sie sehen können, auch wenn putting

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

direkt in das javascript funktioniert es nicht. Wenn ich überprüfen Sie die "advancedsearchtoggle", ich kann sehen, dass die Klasse zu bekommen ist, richtig angewendet (und alle anderen css, den ich in der Klasse). Nur das drehen, scheint nicht zu funktionieren in Safari & Chrom.

Haben Sie ein live-Beispiel? Die CSS-syntax für die Chrome/Safari drehen ist richtig.
jsfiddle.net/gnarf/UNzYb -- Fummelte, (scheint richtig zu sein in FF / broken in Safari)

InformationsquelleAutor Paul Riedel | 2010-11-08

Schreibe einen Kommentar