पृष्ठभूमि छवि पर CSS3 संक्रमण

Question

मैं एक CSS3 ट्रांसफॉर्म करना चाहता हूं: घुमाने (360deg); एक संक्रमण में 1 एस; एक अलग छवि (तत्व) की बजाय पृष्ठभूमि छवि पर .. क्या यह संभव है? मैंने 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); 
} 

मुझे आशा है कि यह संभव है! मैं जानता हूँ कि इसके साथ जे एस (jQuery) में आसानी से संभव है:

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

... लेकिन मैं जानना चाहता हूँ अगर यह केवल सीएसएस के साथ संभव है (3)

HTML:

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

Answer 1

सुनिश्चित करें कि आप, कुछ इस तरह की कोशिश कर सकते हैं:

एचटीएमएल

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

सीएसएस

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