CSS3/CSS - 旋转背景图像

Question

是否有可能在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

Answer 1

您可以在伪元素上设置背景,例如after

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

<div class="main"></div>

演示

Answer 2

您可以将背景放在伪元素上,::before并将其设置为动画.

示例,另一个 :)

如果图像上方有内容,请添加z-index: -1到伪元素.