Bir arka plan görüntüsünde CSS3 geçişi

Question

Bir CSS3 dönüşümü yapmak istiyorum: rotate (360deg); bir geçişte 1s; , ayrı bir görüntü (eleman) yerine bir arka plan resmi üzerine .. Bu mümkün mü? Google'dan cehennem aradım ama başarı yok! Ne elde etmek çalışıyorum gibi bir şey:

#footerLogo { 
    background: url('ster.png'), 
    -moz-transition: -moz-transform 1s, 
    transition: transform 1s, 
    -o-transition: -o-transform 1s, 
    -webkit-transition: -webkit-transform 1s; 
    background-position: #outlinedtotheleft; 
} 
#footerLogo:hover { 
    background: transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -webkit-transform: rotate(360deg); 
} 

umarım bu mümkün! Bunun ile JS (jQuery) içinde kolayca yapılabilir biliyorum:

$('#something').hover(function(){morecodehere}); 

... ama sadece CSS ile mümkün olup olmadığını bilmek istiyorum (3)

HTML:

<div id="footerLogo"> 
    <img src="carenza.png"/> 
</div> 

Answer 1

Emin:

HTML

<div id="planet"> 
</div> 

CSS

#planet { 
    width:200px; 
    height:200px; 
    background: transparent url(http://cdn3.iconfinder.com/data/icons/nx11/Internet%20-%20Real.png) no-repeat center center; 
} 

#planet { 
    -webkit-animation-name: rotate; 
    -webkit-animation-duration:2s; 
    -webkit-animation-iteration-count:infinite; 
    -webkit-animation-timing-function:linear; 
    -moz-animation-name: rotate; 
    -moz-animation-duration:2s; 
    -moz-animation-iteration-count:infinite; 
    -moz-animation-timing-function:linear; 
} 

@-webkit-keyframes rotate { 
    from {-webkit-transform:rotate(0deg);} 
    to { -webkit-transform:rotate(360deg);} 
} 

@-moz-keyframes rotate { 
    from {-moz-transform:rotate(0deg);} 
    to { -moz-transform:rotate(360deg);} 
} 

JSFiddle

Answer 2

Arka plan görüntüsünün kendisine bir dönüşüm uygulayabileceğinizi sanmıyorum (div'den ayrı olarak.) Ancak, tüm geçişi döndürmek için geçişi kullanarak geçiş yapabilirsiniz (here's a working example.)

Gerçekleştirmek istediğiniz tam etkiyi tarif ederseniz yardımcı olabilir?

Kod: Eğer, böyle bir şey deneyebilirsiniz

#footerlogo { 
    width: 200px; 
    height: 200px; 
    background-image: url(http://lorempixum.com/200/200); 
    -webkit-transition: -webkit-transform 1s; 
    -moz-transition: -moz-transform 1s; 
    transition: transform 1s; 
} 

#footerlogo:hover { 
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    transform: rotate(360deg); 
}