Using css class with webkit conversion does not work in Safari or Chrome

Question

I am 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 enough in Firefox and Opera, but not in Safari or Chrome. (Not tried IE yet)

What am I doing wrong?

Full 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 runs 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 during installation

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

directly in javascript, it does not work. When I check for "advancedsearchtoggle", I see that the get class is applied correctly (and any other css that I put in the class). Just rotation does not work in Safari and Chrome.

Answer 1

I think Webkit just doesn't support turning on <span>. Remember that the CSS provider prefix is ​​called “experimental” for some reason.

It seems to support rotation on tags such as div, p or h1, but I noticed that when I first tried to do this, the symbol disappeared because you need to determine the height and width large enough to rotate the element 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 can be unpredictable if you do not know the size of the text rotation.

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

Answer 2

webkit does not support conversions on inline elements , but only block / boxed elements, although a working project from W3C requires transformations to work with both block and inline elements.

You can convert an inline element to a block element using display: inline-block

Answer 3

For posterity purposes only: webkit seems to apply rotation to elements set to display: inline-block .