使用 webkit 转换应用 css 类在 Safari 或 Chrome 中不起作用答案

【问题标题】：Applying css class with webkit transform does not work in Safari or Chrome使用 webkit 转换应用 css 类在 Safari 或 Chrome 中不起作用
【发布时间】：2011-05-06 12:43:27
【问题描述】：

我正在应用这个 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 中似乎不起作用。

【问题讨论】：

你有活生生的例子吗？ Chrome/Safari 旋转的 CSS 语法是正确的。
jsfiddle.net/gnarf/UNzYb -- Fiddled（在 FF 中似乎是正确的/在 Safari 中是错误的）

标签： javascript css google-chrome safari webkit

【解决方案1】：

仅出于后代目的：webkit 似乎对设置为 display: inline-block 的元素应用旋转。

【讨论】：

【解决方案2】：

webkit does not support transforms on inline elements 还只是块/盒装元素，尽管working draft from the W3C 要求对块和内联元素都进行转换。

您可以使用 display: inline-block 将内联元素转换为块元素

【讨论】：

【解决方案3】：

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

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

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

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

这在某种程度上有效，但如果您不知道被旋转文本的尺寸，则可能无法预测。

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

【讨论】：

适用于“显示：块；”元素。
"display: inline-block" 效果更好，因为您不必为它们设置宽度。