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>