javascript - 使用 webkit 转换应用 css 类在 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;   
        }
    }

这是触发 javascript 的 HTML:

<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”时，我可以看到该类已正确应用(以及我放入该类的任何其他 css)。只是旋转似乎在 Safari 和 Chrome 中不起作用。

Answer 1

我认为 Webkit 还不支持 标签的旋转。请记住， vendor 前缀 CSS 被称为“实验性”是有原因的。

它似乎支持 div、p 或 h1 等标签的旋转，但我注意到当我第一次尝试这样做时，符号消失了，因为你需要定义足够大的高度和宽度，以便旋转的元素会适合里面。

例如，您可以将 span 标记更改为:

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

这在一定程度上起作用，但如果您不知道旋转文本的尺寸，它可能无法预测。

您也许可以在 Webkit 中找到另一个可以正确旋转的 HTML 文本标签，或者做一些 javascript 来确定您需要旋转的文本的高度和宽度...