Chuyển đổi CSS3 trên hình nền

Question

Tôi muốn thực hiện chuyển đổi CSS3: xoay (360deg); trong quá trình chuyển đổi 1s; trên hình nền thay vì hình ảnh riêng biệt (phần tử) .. Điều này có khả thi không? Tôi đã tìm kiếm địa ngục trên Google nhưng không thành công! Điều tôi đang cố gắng đạt được là:

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

Tôi hy vọng điều này là có thể! Tôi biết điều đó là dễ dàng doable trong JS (jQuery) với:

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

... nhưng tôi muốn biết nếu nó có thể chỉ với CSS (3)

HTML:

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

Answer 1

Chắc chắn bạn có thể, hãy thử một cái gì đó như thế này:

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

Tôi không nghĩ rằng bạn có thể áp dụng biến đổi cho chính hình nền (tách biệt với div.) Tuy nhiên, bạn có thể xoay toàn bộ div, bao gồm cả việc sử dụng chuyển đổi để tạo ảnh động (here's a working example.)

Nó có thể giúp đỡ nếu bạn có thể mô tả hiệu quả chính xác mà bạn muốn đạt được?

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