Переход CSS3 на фоновое изображение

Question

Я хочу сделать преобразование CSS3: вращать (360deg); в переходе 1s; на фоновом изображении вместо отдельного изображения (элемент). Возможно ли это? Я искал ад из Google, но не добился успеха! То, что я пытаюсь достичь что-то вроде:

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

Я надеюсь, что это возможно! Я знаю, что это легко выполнимо в JS (JQuery) с:

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

... но я хочу знать, если это возможно только с помощью CSS (3)

HTML:

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

Answer 1

Конечно, вы можете, попробовать что-то вроде этого:

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

Я не думаю, что вы можете применить преобразование к самому фоновому изображению (отдельно от div). Однако вы можете повернуть весь div, включая использование для его анимации (here's a working example.)

Это может помочь, если вы сможете описать точный эффект, который вы хотите достичь?

Код:

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