CSS3/CSS - wirujący obraz tła

Question

czy można obrócić obraz tła w css?

mogę kręcić element przy użyciu:

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

ale co jeśli chcę kręcić danego elementu background-image?

nie mogę znaleźć nic, mogę użyć gif, ale chciałbym go zrobić w css jeśli to możliwe!

jakiś pomysł? dzięki

zapomniałem powiedzieć, czy jest możliwe, aby animację krzyżowe przeglądarek obsługiwane: P

Answer 1

Można to zrobić ustawienie tła na pseudo elementu, na przykład w po

.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

można umieścić tło na elemencie pseudo, jak ::before i animowania tego.

Example i another one :)

---

Jeśli masz treść powyższy obrazek, add z-index: -1 to the pseudo element.