使用Webkit Transform应用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>

正如您所看到的，即使在放置

标签时

，HTML文档也需要遵循语法规则。

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

直接将其放入javascript中是不起作用的。当我检查“advancedsearchtoggle”时，我可以看到类被正确应用（以及我放入类中的任何其他css）。只有旋转在Safari和Chrome中似乎无法工作。

- Paul Riedel

---

你有现成的例子吗？Chrome/Safari旋转的CSS语法是正确的。 - Kyle

http://www.jsfiddle.net/gnarf/UNzYb/ -- 已经调试完成（在火狐浏览器中看起来正确，在Safari中有问题） - gnarf

Answer 1

我认为Webkit目前还不支持在<span>标签上进行旋转。请记住，厂商前缀的CSS之所以称为“实验性的”，是有原因的。

似乎它支持对像div、p或h1这样的标签进行旋转，但我发现当我第一次尝试这样做时，符号消失了，因为您需要定义足够大的高度和宽度，使旋转的元素能够适应其中。

例如，您可以将span标签更改为以下内容：

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

这个方法在一定程度上可行，但如果你不知道旋转的文本的尺寸，它可能会变得不可预测。

你可以尝试找到另一个在Webkit中正确旋转的HTML文本标签，或者编写一些 JavaScript 来确定你需要旋转的文本的高度和宽度...

- Jeff

---

适用于“display: block;”元素的作品。 - Ivan Vučica

"display：inline-block"的效果更好，因为您无需为它们设置宽度。 - Spoike

Answer 2

WebKit不支持对行内元素进行变换，只能对块级/框状元素进行变换，尽管W3C的工作草案要求变换可以在块级和行内元素上使用。

您可以通过使用display: inline-block将行内元素转换为块级元素。

- Michael Mullany

Answer 3

仅供参考：webkit似乎会对设置为display: inline-block的元素应用旋转。

- ectogon