CSS3/CSS - 自旋背景圖像

我可以用旋轉一個元素：

@-webkit-keyframes spinX 
{ 
0% {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;} 
100% {-webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;} 
} 

@-webkit-keyframes spinY 
{ 
0% {-webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;} 
100% {-webkit-transform: rotateY(360deg); -webkit-transform-origin: 0% 0% 5;} 
}

但怎麼樣，如果我想旋轉一個元素的背景圖片？

找不到任何東西，我可以使用GIF，但如果可能的話，我想在CSS中製作它！

有什麼想法嗎？感謝

我忘了說，如果有可能使動畫支持跨瀏覽器：P

來源

2013-06-05 sbaaaang

看看這個：HTTP：//www.sitepoint .com/css3-transform-background-image/ – Pevara

現在只需要移除所有'-webkit-'前綴就可以跨瀏覽器瀏覽一天。更新瀏覽器FTW –

你可以做到這一點

.main { 
 
    width: 200px; 
 
    height: 300px; 
 
    position: relative; 
 
    border: solid 1px gray; 
 
} 
 

 
.main:after { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    background: url("http://placekitten.com/800/1200"); 
 
    background-size: cover; 
 
    content: ''; 
 
    -webkit-animation: spinX 3s infinite; 
 
    animation: spinX 3s infinite; 
 
} 
 

 
@-webkit-keyframes spinX 
 
{ 
 
0% {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;} 
 
100% {-webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;} 
 
} 
 
@keyframes spinX 
 
{ 
 
0% {transform: rotateX(0deg); transform-origin: 0% 50% 0;} 
 
100% {transform: rotateX(360deg); transform-origin: 0% 50% 0;} 
 
}