html - div旋转不起作用

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

您将转换应用于错误的属性：（工作 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 属性。