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

Вы можете сделать настройки фона на псевдо-элемента, например с после

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

demo

Answer 2

Вы можете поставить фон на псевдо-элемента, как ::before и анимировать это.

Example и another one :)

---

Если у Вас есть содержание над изображением, add z-index: -1 to the pseudo element.