CSS同时旋转和替换图像

Question

有人可以帮助我理解如何使用CSS在旋转的同时旋转和更改图像？当用户将鼠标悬停在图像上时，我想在旋转过程中开始旋转并更改图像。到目前为止，我有以下，但我不知道如何延迟悬停的图像更改。

.image-swap { 
    background: url("image1.jpg") no-repeat; 
    border-radius: 50%; 
    height: 300px; 
    width: 300px; 
    -moz-transition: -moz-transform 0.8s ease-in-out; 
    -webkit-transition: -webkit-transform 0.8s ease-in-out; 
    -o-transition: -o-transform 0.8s ease-in-out; 
    -ms-transition: -ms-transform 0.8s ease-in-out; 
    transition: transform 0.8s ease-in-out; 
} 
.image-swap:hover { 
    background: url("image2.jpg") no-repeat; 
    cursor: pointer; 
    -moz-transform: rotateY(360deg); 
    -webkit-transform: rotateY(360deg); 
    -o-transform: rotateY(360deg); 
    -ms-transform: rotateY(360deg); 
    transform: rotateY(360deg); 
} 

Answer 1

你真的只需要添加background-image到transition规则。在这个例子中，我还使用了一个容器元素来触发悬停（否则交互式区域会随图像一起旋转，如果光标被捕捉到，例如一个移动的角落，会导致摇晃）。

.image-swap-container { 
 
    width: 300px; 
 
    height: 300px; 
 
    overflow: hidden; 
 
} 
 

 
.image-swap { 
 
    background-repeat: no-repeat; 
 
    background-image: url("http://placehold.it/300x300/ff0000"); 
 
    border-radius: 50%; 
 
    height: 300px; 
 
    width: 300px; 
 
    transform: none; 
 
    transition: transform 1s, background-image 1s; 
 
} 
 

 
.image-swap-container:hover { 
 
    cursor: pointer; 
 
} 
 

 
.image-swap-container:hover .image-swap { 
 
    background: url("http://placehold.it/300x300/00ff00"); 
 
    transform: rotateZ(360deg); 
 
}

<div class="image-swap-container"><div class="image-swap"></div></div>