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;">»</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)
jsfiddle.net/gnarf/UNzYb -- Fummelte, (scheint richtig zu sein in FF / broken in Safari)
InformationsquelleAutor Paul Riedel | 2010-11-08
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich denke, dass Webkit nur nicht unterstützt rotation auf < span > - tags noch nicht. Denken Sie daran, vendor-Präfix CSS sind sogenannte "experimentelle" für einen Grund.
Scheint es zu unterstützen rotation auf tags wie div, p, h1, aber ich habe bemerkt, dass wenn ich zuerst versucht, dies zu tun, ist das symbol verschwunden, weil Sie brauchen, um zu definieren, Höhe und Breite groß genug, so dass das gedrehte element passen in.
Beispielsweise können Sie ändern Sie den span-tag:
das funktioniert einigermaßen, aber es kann unberechenbar sein, wenn Sie nicht wissen, die Abmessungen der text gedreht wird.
Könnten Sie in der Lage sein zu finden, eine andere HTML-text-tag, dreht sich richtig in Webkit, oder einige javascript, um zu bestimmen, die Höhe und Breite des Textes, den Sie drehen müssen...
Funktioniert auf "display: block;" Elemente.
"display: inline-block" funktioniert besser als Sie nicht haben, um Breite zu Ihnen.
InformationsquelleAutor Jeff
webkit unterstützt keine Transformationen auf inline-Elemente noch, nur block/Box-Elemente, obwohl die working draft des W3C fordert Transformationen arbeiten auf block-und inline-Elemente.
Kann man ein inline-element ein block-element mit display: inline-block
InformationsquelleAutor Michael Mullany
Nur für die Nachwelt Zwecke: - webkit-scheint zuzutreffen, rotation der Elemente festgelegt
display: inline-block
.InformationsquelleAutor ectogon