Transición CSS3 en una imagen de fondo

Question

Quiero hacer una transformación CSS3: rotar (360deg); en una transición 1s; en una imagen de fondo en lugar de una imagen separada (elemento) .. ¿Esto es posible? ¡Busqué en Google pero no tuve éxito! Lo que estoy tratando de lograr es algo así como:

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

espero que esto sea posible! Sé que es fácilmente factible en JS (jQuery) con:

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

... pero me gustaría saber si es posible sólo con CSS (3)

HTML:

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

Answer 1

Claro que puedes, intentar algo como esto:

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

No creo que pueda aplicar una transformación a la imagen de fondo misma (por separado del div.) Sin embargo, puede girar todo el div, incluido el uso de una transición para animarlo (here's a working example)

¿Podría ayudar si pudieras describir el efecto exacto que quieres lograr?

Código:

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