CSS3 Animation drehen

244
<img class="image" src="" alt="" width="120" height="120">

Dieses animierte Bild kann nicht funktionieren, es soll eine 360-Grad-Drehung ausführen.

Ich denke, mit dem unten stehenden CSS stimmt etwas nicht, da es einfach still bleibt.

.image {
    float: left;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    @-ms-keyframes spin { 
        from { 
            -ms-transform: rotate(0deg); 
        } to { 
            -ms-transform: rotate(360deg); 
        }
    }
    @-moz-keyframes spin { 
        from { 
            -moz-transform: rotate(0deg); 
        } to { 
            -moz-transform: rotate(360deg); 
        }
    }
    @-webkit-keyframes spin { 
        from { 
            -webkit-transform: rotate(0deg); 
        } to { 
            -webkit-transform: rotate(360deg); 
        }
    }
    @keyframes spin { 
        from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(360deg); 
        }
    }
}
Borsn
quelle

Antworten:

520

Hier ist eine Demo . Das richtige Animations-CSS:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">


Einige Hinweise zu Ihrem Code:

  1. Sie haben die Keyframes in der .imageRegel verschachtelt , und das ist falsch
  2. float:left funktioniert nicht bei absolut positionierten Elementen
  3. Schauen Sie sich caniuse an : IE10 benötigt das -ms-Präfix nicht
Giona
quelle
13
Wenn jemand dies in seinem eigenen Code versucht: VERGESSEN SIE NICHT den @ Abschnitt unten
Jack M.
Hallo Kann ich die Animation Infinity Rotation nach 5s stoppen?
MD Ashik
16
Ich habe fast mein Wasser ausgespuckt, als ich die Animation lief.
Razgriz
" float:left won't work on absolutely positioned elements", es wird sie jedoch auf die minimale Größe verkleinern, ähnlich wie bei der Anzeige: Inline-Block
Gregn3
32

Ich habe ein rotierendes Bild, das dasselbe verwendet wie Sie:

.knoop1 img{
    position:absolute;
    width:114px;
    height:114px;
    top:400px;
    margin:0 auto;
    margin-left:-195px;
    z-index:0;

    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;

     overflow:hidden;
}

.knoop1:hover img{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);
}
Ryan de Vries
quelle
1
hinzufügen: transform:rotate(360deg);für IE
Dusty
3
Bitte wählen Sie lokale Beispiele über defekte Website-Links.
evolutionxbox
Link ist jetzt unterbrochen.
Markus Bucher
30

Um die 360-Grad-Drehung zu erreichen, finden Sie hier die Arbeitslösung .

Der HTML:

<img class="image" src="your-image.png">

Das CSS:

.image {
    overflow: hidden;
    transition-duration: 0.8s;
    transition-property: transform;
}
.image:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

Sie müssen mit der Maus über das Bild fahren und erhalten den 360-Grad-Rotationseffekt.

PS: Fügen Sie eine -webkit-Erweiterung hinzu, damit sie auf Chrome und anderen Webkit-Browsern funktioniert. Sie können die aktualisierte Geige für das Webkit HIER überprüfen

Nitesh
quelle
Geige funktioniert nicht oO Chrome Inspector mag Ihr CSS nicht, insbesondere die "Transformation" - und "Transition-Eigenschaft". Ach je.
Just Plain High
1
Dazu müssen Sie ein hinzufügen, -webkit-tranformdamit es funktioniert. Hier ist die aktualisierte Geige. jsfiddle.net/sELBM/172 - @JustPlainHigh
Nitesh
1
2017: Dies wird jetzt sehr gut unterstützt und ist eine bevorzugte Methode, um nicht unendliche Rotationen durchzuführen. -webkit-Präfix wird nicht mehr benötigt und kann sicher entfernt werden. Browser-Unterstützung: caniuse.com/#search=transforms
Alph.Dev
2

Wenn Sie das Bild spiegeln möchten, können Sie es verwenden.

.image{
    width: 100%;
    -webkit-animation:spin 3s linear infinite;
    -moz-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite;
}
@-moz-keyframes spin { 50% { -moz-transform: rotateY(90deg); } }
@-webkit-keyframes spin { 50% { -webkit-transform: rotateY(90deg); } }
@keyframes spin { 50% { -webkit-transform: rotateY(90deg); transform:rotateY(90deg); } }
Heo Đất Hades
quelle
0

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">

Charles Mbogo
quelle
0

versuche es einfach

 
 .btn-circle span {
     top: 0;
   
      position: absolute;
     font-size: 18px;
       text-align: center;
    text-decoration: none;
      -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

.btn-circle span :hover {
 color :silver;
}


/* rotate 360 key for refresh btn */
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } 
 <button type="button" class="btn btn-success btn-circle" ><span class="glyphicon">&#x21bb;</span></button>

Omar bakhsh
quelle
-6

Hier soll dir das helfen

Der folgende jsfiddle-Link hilft Ihnen zu verstehen, wie man ein Bild dreht. Ich habe das gleiche verwendet, um das Zifferblatt einer Uhr zu drehen.

http://jsfiddle.net/xw89p/

var rotation = function (){
   $("#image").rotate({
      angle:0, 
      animateTo:360, 
      callback: rotation,
      easing: function (x,t,b,c,d){       
          return c*(t/d)+b;
      }
   });
}
rotation();

Wo: • t: aktuelle Zeit,

• b: Anfangswert,

• c: Wertänderung,

• d: Dauer,

• x: nicht verwendet

Keine Lockerung (lineare Lockerung): Funktion (x, t, b, c, d) {Rückgabe b + (t / d) * c; }}

Abhi
quelle
2
Ich würde diese Antwort positiv bewerten, wenn Sie ein bisschen mehr Informationen bereitstellen (wie Sie es in der Geige tun). Ich denke auch, dass Sie erwähnen sollten, dass dies ein jQuery-Plugin ist, weil ich alle dachte: "Ich wusste nicht, dass jQuery das kann !!! ^ _ ^ schaut auf Geige Oh warte ... U_U"
Just Plain High
2
eine Erklärung der Variablen x, t, b, c, d (wie Sie es in der Geige tun) und eine klare Aussage, dass es sich zwar nicht um eine von OP angeforderte CSS-Lösung handelt, es sich jedoch um eine recht einfache und effektive jQuery-Plugin-Lösung handelt: )
Just Plain High
3
Abgestimmt. Das OP hat keine Javascript-Lösung angefordert, insbesondere kein jQuery-Plugin. Bleib bei dem, was gefragt wird.
TheCarver