旋转图片无法在Firefox中使用

Question

Here is my css code

  .buildrag-toggle {
      -webkit-transform: rotate(180deg);
      -webkit-transition: 300ms ease all;
      -moz-transition: 300ms ease all;
      -o-transition: 300ms ease all;
      transition: 300ms ease all;
    }

Can you please explain why this is not working in Firefox only on other browsers?

Answer 1

do not use only -webkit-transform also add transform: transform: rotate(180deg)

you could also add ms-transform for IE9 support

eg.:

-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);

see: http://www.w3schools.com/cssref/css3_pr_transform.asp

Answer 2

Write the standard rule, -webkit- prefix only works in chrome/safari

.buildrag-toggle {
  -webkit-transform: rotate(180deg); /* chrome / safari only */
  transform: rotate(180deg); /* standard */
  -webkit-transition: 300ms ease all;
  -moz-transition: 300ms ease all;
  -o-transition: 300ms ease all;
  transition: 300ms ease all;
}