我正在通过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;
}
问题是当我将鼠标悬停在元素外时,图像不会向后旋转。
答案 0 :(得分:0)
真正的问题不在于它是在旋转回来,真正的问题是它会立即发生。
你需要在tha base元素上进行转换,以便在悬停和悬停时应用它
这个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);
}