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