CSS3/CSS - Spinnen Hintergrundbild

Question

ist es möglich, ein Hintergrundbild in CSS zu drehen?

i kann ein Element mit Spin:

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

aber was ist, wenn ich will ein Element Hintergrund-Bild drehen?

kann nichts finden, ich kann gif verwenden, aber ich würde es gerne in css machen, wenn möglich!

eine Idee? dank

ich vergaß zu sagen, wenn möglich, ist die Animation Quer Browser unterstützt zu machen: P

Answer 1

Sie können tun, dass der Hintergrund auf einer Pseudo-Element-Einstellung, zum Beispiel einer nach

.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

Sie den Hintergrund auf einem Pseudo-Elemente setzen könnte, wie ::before und animiert.

Example und another one :)

---

Wenn Sie Inhalte über dem Bild haben, add z-index: -1 to the pseudo element.