CSS3 transition to background image

Question

I want to do a CSS3 conversion: rotate (360deg); in transition 1s; instead of a background image instead of a single image (element). Is it possible? I searched for hell from Google, but did not succeed! What I'm trying to achieve is something like:

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

Hope this is possible! I know this is easy to do in JS (jQuery) with:

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

... but I want to know if this is only possible with CSS (3)

HTML:

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

Answer 1

Of course, you can try something like this:

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

I don’t think you can apply the conversion to the background image itself (separate from the div). However, you can rotate the entire div, including using the transition to animate it ( here's a working example .)

Can this help if you can describe the exact effect you want to achieve?

the code:

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