CSS3/CSS - immagine di sfondo rotante

Question

è possibile ruotare un'immagine di sfondo in css?

posso girare un elemento utilizzando:

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

ma che dire se voglio girare background-image di un elemento?

non riesco a trovare nulla, posso usare gif ma mi piacerebbe farlo in css se possibile!

qualche idea? grazie

ho dimenticato di dire se è possibile fare l'animazione cross-browser supportati: P

Answer 1

Puoi farlo impostando lo sfondo su un elemento pseudo, per esempio un dopo

.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

Si potrebbe mettere lo sfondo su un elemento pseudo, come ::before e animare questo.

Example, e another one :)

---

Se si dispone di contenuti sopra l'immagine, add z-index: -1 to the pseudo element.