javascript - Firefox Javascript div 旋转不工作，但在 Chrome 和 Safari 中工作

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 (>=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 中按这个顺序使用它们，但它仍然不能保证你完全支持浏览器

编辑正如我从您的评论中了解到的，您对使用它们的顺序感兴趣：通常最现代的属性是最后一个应用覆盖所有旧属性的属性