CSS3背景旋轉動畫鼠標懸停

Question

這裏是我的div。

#div1{ 
     position: absolute; 
     top:  50%; 
     left:  50%; 
     margin-left:-100px; 
     margin-top: 420px; 
     width:  158px; 
     height:  158px; 
     background-image:url(images/background.png); 
    } 

我需要360度爲鼠標事件背景圖像旋轉動畫。有誰能夠幫助我？謝謝。

Answer 1

這裏是你的要求：

jsFiddle Demo

<div id="div1">rterterrt 
teteterrtetre<div id="div2"> 
</div></div> 

。

#div1{ 
     position: absolute; 
     top:  50%; 
     left:  50%; 
     margin-left:-100px; 
     /*margin-top: 420px;*/ 
     width:  158px; 
     height:  158px; 

} 
#div2{ 


     /*margin-top: 420px;*/ 
     width:  158px; 
     height:  158px; 
     background-image:url(http://www.commentsyard.com/cy/01/6474/Mixed%20Flowers%20and%20a%20Bear.jpg); 
} 

#div2:hover { 
    -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);} 
} 
​ 

Answer 2

您不能通過CSS（等級2,3）來旋轉背景圖像。 所以你唯一的選擇是使用單獨的元素與該圖像，並作爲一個整體旋轉/動畫該元素。

但你可以在CSS level 4中做到這一點。

Answer 3

您可以使用僞元素來實現這一

#div1{ 
     position: absolute; 
     top:  50%; 
     left:  50%; 
     margin-left:-100px; 
     margin-top: 420px; 
} 
#div:before { 
    content: ""; 
    position: absolute; 
    width: 158px; 
    height: 158px; 
    background-image:url(images/background.png); 
    transition: all 1s linear; 
} 

#div:hover:before { 
    transform:rotate(360deg); 
} 

Answer 4

旋轉背景圖片：懸停只使用CSS代碼。

http://designshack.net/tutorialexamples/multiplebackgrounds/index.html