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 でこれらすべてをこの順序で使用する必要がありますが、それでもブラウザの完全なサポートを約束するものではありません。

編集あなたのコメントから理解しているように、それらを使用する順序に興味があります:通常、最も近代的なプロパティは、すべての古いプロパティをオーバーライドするために最後に適用されます