css3旋转不会在悬停时回来答案

【问题标题】：css3 rotate not coming back on hovering outcss3旋转不会在悬停时回来
【发布时间】：2013-08-18 05:06:56
【问题描述】：

我正在通过 css3 transform 旋转图像

#services .info img{
-ms-transform: rotate(0deg) rotateY(0); /* IE 9 */
-webkit-transform: rotate(0deg) rotateY(0); /* Safari and Chrome */
-o-transform: rotate(0deg) rotateY(0); /* Opera */
-moz-transform:rotate(0deg) rotateY(0); /* Firefox */
transform: rotate(0deg) rotateY(0);


}


#services .info img:hover{ -ms-transform: rotate(360deg) rotateY(0); /* IE 9 */
-webkit-transform: rotate(360deg) rotateY(0); /* Safari and Chrome */
-o-transform: rotate(360deg) rotateY(0); /* Opera */
-moz-transform:rotate(360deg) rotateY(0); /* Firefox */
transform: rotate(360deg) rotateY(0); transition:.3s;
}

问题是当我将鼠标悬停在元素之外时，图像没有旋转回来。

【问题讨论】：

标签： css css-transitions css-transforms

【解决方案1】：

真正的问题不在于它会向后旋转，真正的问题是它会立即旋转。

您需要在基本元素上设置过渡以在悬停和悬停时应用它

此 CSS 有效：

#test {
    width: 60px;
    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Safari and Chrome */
    -o-transform: rotate(0deg); /* Opera */
    -moz-transform:rotate(0deg); /* Firefox */
    transform: rotate(0deg);
    -webkit-transition: .3s;   
    transition: .3s;   
}

#test:hover {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Safari and Chrome */
    -o-transform: rotate(360deg); /* Opera */
    -moz-transform:rotate(360deg); /* Firefox */
    transform: rotate(360deg);
}

demo

【讨论】：