如何旋转伪元素的背景图像？

Question

我知道我可以通过将背景图像插入伪元素并使其旋转来旋转背景图像。 但是，如果我需要旋转伪元素的背景图像，我该怎么办？

这是我的情况：

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

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

#button_motore:hover {

	background-color: #418FDC;

}

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


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

<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;   
}