Как я могу повернуть фоновое изображение псевдоэлемента?

Question

Я знаю, что могу поворачивать фоновое изображение, вставляя его в псевдоэлемент и поворачивая его. Но если мне нужно повернуть фоновое изображение псевдоэлемента, как я могу это сделать?

Это мой случай:

#button_motore { 
 
\t 
 
\t width: 150px; 
 
\t height: 50px; 
 
\t background-color: #41a8dc; 
 
\t position: relative; 
 
\t padding: 0; 
 
\t border: 0; 
 
\t transition: 0.5s; 
 
\t display: inline-block; 
 
\t margin-top: 10px; \t \t 
 
\t 
 
} 
 

 
#button_motore:after { 
 
\t 
 
\t content: ""; 
 
\t width: 50px; 
 
\t height: 50px; 
 
\t position:absolute; 
 
\t background-color: #418FDC; 
 
\t display:inline-block; 
 
\t right: 0; 
 
\t top: 0; 
 
\t background-image: url(../img/eliche.png); 
 
\t background-size: 35px 35px; 
 
\t background-position: 7.5px 7.5px; 
 
\t background-repeat: no-repeat; 
 
\t transition: 0.5s; 
 
\t 
 
} 
 

 
#button_motore:hover { 
 

 
\t background-color: #418FDC; 
 

 
} 
 

 
#button_motore:hover::after{ 
 
\t 
 
\t background-color: #4172DC; 
 
\t -webkit-animation: motore_animation 0.4s linear; 
 
\t animation: motore_animation 0.4s linear; 
 
\t -webkit-animation-fill-mode: forwards; 
 
\t animation-fill-mode: forwards; 
 
\t \t 
 
} 
 

 

 
#button_motore_content{ 
 
\t 
 
\t font-size: 18px; 
 
\t color: white; 
 
\t position:relative; 
 
\t right: 25px; 
 
\t 
 
}

<button type="submit" id="button_motore" name="motore"><font id="button_motore_content">Motore</font></button>

Я хочу, чтобы повернуть eliche.png. Я также могу использовать jQuery.

Answer 1

Как упоминалось в @Paulie_D, вы не можете вращать фоновое изображение, но вы можете вращать сам псевдоэлемент. Это выглядело бы так:

@keyframes spin { 
    0% {transform: rotate(0deg);} 
    100% {transform: rotate(360deg);} 
} 

#button_motore:hover::after{ 
    background-color: #4172DC; 
    /* obviously add prefixes */ 
    animation: spin 1s infinite linear; 
}