css - 旋转图像在 Firefox 中不起作用

Question

这是我的CSS代码

  .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;
    }

您能否解释一下为什么这仅在 Firefox 中不适用于其他浏览器？

Answer 1

不要只使用-webkit-transform还要添加transform:transform: rotate(180deg)

您还可以添加 ms-transform 以支持 IE9

例如:

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

参见:http://www.w3schools.com/cssref/css3_pr_transform.asp