Html Div旋转不工作

我正在用CSS进行测试，得到了一个奇怪的行为：transform:rotate不起作用，下面是一个动画不发生的示例：

CSS

.close {
    width:100px;
    height:100px;
    background:#00f;
    color:#fff;

    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}
.close:hover {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
.close, .close:hover {
    -webkit-transition:rotate .2s ease-in-out;
    -moz-transition:rotate .2s ease-in-out;
    -o-transition:rotate .2s ease-in-out;
    -ms-transition:rotate .2s ease-in-out;
    transition:rotate .2s ease-in-out;
}

为什么这不起作用

---

谢谢；）

将转换应用到错误的属性：（）

.close{/*您并不需要。close:将鼠标悬停在这里*/
-webkit转换：-webkit转换。2轻松输入输出；
-moz转换：-moz转换。2秒轻松输入输出；
-o-转换：-o-转换。2容易输入输出；
-ms转换：-ms转换。2缓进输出；
转换：转换。2s轻松输入输出；
}

---

要设置动画的属性是

transform

rotate（）

是一个转换函数，而不是CSS属性。

它应该是所有前缀转换上的-webkit吗？