Application classe CSS avec webkit transformerai ne fonctionne pas dans Safari ou Chrome

Question

J'application cette classe CSS:

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

Il fonctionne suffisamment dans Firefox et Opera, mais pas dans Safari ou Chrome. (Je n'ai pas encore essayé IE)

Qu'est-ce que je fais mal?

La fonction JavaScript complet:

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

C'est le code HTML qui déclenche le javascript: Comme vous pouvez le voir

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

, même lors de la mise

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

directement dans le javascript, cela ne fonctionne pas. Quand j'inspecte le "advancedsearchtoggle", je peux voir que la classe get est correctement appliquée (et tout autre css que j'ai mis dans la classe). Juste la rotation ne semble pas fonctionner dans Safari & Chrome.

Answer 1

Je pense que Webkit ne supporte pas la rotation sur < span> tags encore. Rappelez-vous, les CSS fournisseur-préfixe sont appelés "expérimental" pour une raison. Je pense que lorsque j'ai essayé de le faire, le symbole a disparu parce que vous devez définir une hauteur et une largeur suffisamment grande pour que l'élément pivoté va s'adapter à l'intérieur.

Par exemple, vous pouvez changer la balise span à ceci:

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

qui fonctionne dans une certaine mesure, mais il peut être imprévisible si vous ne connaissez pas les dimensions du texte étant mis en rotation.

Vous pourriez être en mesure de trouver une autre balise de texte HTML qui tourne correctement dans Webkit, ou faire le javascript pour déterminer la hauteur et la largeur du texte que vous devez tourner ...

encore

Answer 2

, juste bloc/des éléments encadrés, bien que le working draft from the W3C appelle des transformations pour fonctionner sur les éléments en bloc et en ligne.

Vous pouvez convertir un élément en ligne à un élément de bloc en utilisant l'affichage: inline-block

Answer 3

Juste à des fins de la postérité: WebKit semble appliquer une rotation aux éléments mis à display: inline-block.