潜水器旋转不起作用

Question

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

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

为什么不起作用？

谢谢；）

Answer 1

您将转换应用于错误的属性：（Working jsFiddle）

.close { /* You don't really need .close:hover here */
    -webkit-transition: -webkit-transform .2s ease-in-out;
       -moz-transition:    -moz-transform .2s ease-in-out;
         -o-transition:      -o-transform .2s ease-in-out;
        -ms-transition:     -ms-transform .2s ease-in-out;
            transition:         transform .2s ease-in-out;
}

要设置动画的属性是transform。rotate()是一个转换函数，而不是CSS属性。