javascript 使用 webkit 转换应用 css 类在 Safari 或 Chrome 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4121843/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Applying css class with webkit transform does not work in Safari or Chrome
提问by Paul Riedel
I'm applying this css class:
我正在应用这个 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 */
}
via:
通过：
document.getElementById("advancedsearchtoggle").className += " turn90";
It works sufficiently in Firefox and Opera, but not in Safari or Chrome. (Haven't tried IE yet)
它在 Firefox 和 Opera 中可以正常工作，但不能在 Safari 或 Chrome 中工作。（还没试过IE）
What am I doing wrong?
我究竟做错了什么？
The Complete JavaScript function:
完整的 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;
}
}
This is the HTML that triggers the javascript:
这是触发 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;">»</span></a>
As you can see, even when putting
如您所见，即使在放置时
document.getElementById('advancedsearchtoggle').style['-webkit-transform'] = 'rotate(90deg)';
directly into the javascript, it doesn't work. When I inspect the "advancedsearchtoggle", I can see that the class get's applied correctly (and any other css I put into the class). Just the rotate doesn't seem to work in Safari & Chrome.
直接进入javascript，它不起作用。当我检查“advancedsearchtoggle”时，我可以看到类 get 已正确应用（以及我放入类中的任何其他 css）。只是旋转似乎在 Safari 和 Chrome 中不起作用。
回答by Jeff
I think Webkit just doesn't support rotation on < span > tags yet. Remember, vendor-prefix CSS are called "experimental" for a reason.
我认为 Webkit 还不支持 <span> 标签上的旋转。请记住，供应商前缀 CSS 被称为“实验性”是有原因的。
It does seem to support rotation on tags like div, p, or h1, but I noticed that when I first tried doing this, the symbol disappeared because you need to define a height and width large enough so that the rotated element will fit inside.
它似乎支持对 div、p 或 h1 等标签进行旋转，但我注意到当我第一次尝试这样做时，符号消失了，因为您需要定义足够大的高度和宽度，以便旋转的元素适合内部。
For example, you can change the span tag to this:
例如，您可以将 span 标记更改为：
<p id="advancedsearchtoggle" style="width: 10px; height: 10px; text-decoration:none;">»</p>
which works to some extent, but it may be unpredictable if you don't know the dimensions of the text being rotated.
这在一定程度上有效，但如果您不知道正在旋转的文本的尺寸，则可能无法预测。
You might be able to find another HTML text tag that rotates properly in Webkit, or do some javascript to determine the height and width of the text you need to rotate...
您也许可以在 Webkit 中找到另一个可以正确旋转的 HTML 文本标签，或者执行一些 javascript 来确定需要旋转的文本的高度和宽度...
回答by Michael Mullany
webkit does not support transforms on inline elementsyet, just block/boxed elements, although the working draft from the W3Ccalls for transforms to work on both block and inline elements.
webkit 尚不支持对内联元素进行转换，仅支持块/装箱元素，尽管W3C的工作草案要求对块和内联元素进行转换。
You can convert an inline element to a block element by using display: inline-block
您可以使用 display: inline-block 将内联元素转换为块元素
回答by ectogon
Just for posterity purposes: webkit seems to apply rotation to elements set to display: inline-block.
仅用于后代目的：webkit 似乎将旋转应用于设置为display: inline-block.
