Question

loadingSpinner2.style['-webkit-transform'] = "rotate(45deg)";

这一行似乎没有设置加载微调器的旋转，但在Safari和Chrome中它确实如此。如何在Firefox中使用它？

Answer 1

这是因为你正在使用webkit前缀（chrome和safari是在webkit上构建的）所以它们不适用于像Firefox这样的非webkit浏览器。
对于Firefox，请使用-moz-前缀

loadingSpinner2.style['-moz-transform'] = "rotate(45deg)";

歌剧有-o-

loadingSpinner2.style['-o-transform'] = "rotate(45deg)";

对于IE（＆gt; = 10），

省略了前缀。

.rot{
    -moz-transform: rotate(45deg); /* For Firefox<16.0 */
    -ms-transform: rotate(45deg); /* For IE9 only */
    -webkit-transform: rotate(45deg); /* For Safari, Chrome, iOS */
    -o-transform: rotate(45deg); /* For Opera<12.10 */
    transform: rotate(45deg); /* For all other CSS3 compatible major browser */
}

loadingSpinner2.classList.add('rot');

Answer 2

我只想添加到@Musa。 transform是新的CSS3属性，因此CSS中的完整代码看起来像

-moz-transform: rotate(45deg); /* For Firefox<16.0 */
-ms-transform: rotate(45deg); /* For IE9 only */
-webkit-transform: rotate(45deg); /* For Safari, Chrome, iOS */
-o-transform: rotate(45deg); /* For Opera<12.10 */
transform: rotate(45deg); /* For all other CSS3 compatible major browser */

所以你必须在你的JS中按顺序使用所有这些，但它仍然不保证你完全支持浏览器

编辑据我所知，你对使用它们的顺序很感兴趣：通常最现代的属性是最后一个适用于覆盖所有旧属性的属性

Firefox Javascript div旋转不起作用，但在Chrome和Safari中可以正常工作

2 个答案: