Применение класса css с преобразованием webkit не работает в Safari или Chrome

Question

Я применяю этот класс 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 */
}

с помощью:

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

Он достаточно работает в Firefox и Opera, но не в Safari или Chrome. (Еще не пробовал IE)

Что я делаю не так?

Полная функция JavaScript:

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

Это HTML, который запускает 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>

Как видите, даже если поставить

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

прямо в javascript, это не работает. Когда я проверяю «advancedsearchtoggle», я вижу, что класс get применен правильно (и любой другой CSS, который я помещаю в класс). Похоже, что поворот не работает в Safari & Chrome.

Answer 1

Я думаю, что Webkit пока не поддерживает ротацию тегов .Помните, CSS-префикс вендора называется «экспериментальным» по определенной причине.

Кажется, он поддерживает ротацию тегов вроде div, p или h1, но я заметил, что когда я впервые попытался это сделать, символисчез, потому что вам нужно задать достаточно большую высоту и ширину, чтобы повернутый элемент поместился внутри.

Например, вы можете изменить тег span на следующий:

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

, который работаетдо некоторой степени, но это может быть непредсказуемо, если вы не знаете размеров вращаемого текста.

Возможно, вам удастся найти другой текстовый тег HTML, который вращается должным образом в Webkit, или выполнить некоторый JavaScript-кодопределить высоту и ширину текста, который нужно повернуть ...

Answer 2

webkit не поддерживает преобразования для встроенных элементов , но только для блочных / штучных элементов, хотя рабочий проект из W3C требует, чтобы преобразования работали как на блочных, так и на встроенных элементах.

Вы можете преобразовать встроенный элемент в элемент блока, используя display: inline-block

Answer 3

Только для потомков: кажется, что webkit применяет вращение к элементам, установленным на display: inline-block.