Warum funktioniert meine 360-Grad-Bilddrehung in CSS3 nicht?

CSS3-Animation drehen

Beim Versuch, ein Bild um 360 Grad zu drehen, treten Probleme mit Ihrem CSS auf. Der bereitgestellte CSS-Code scheint einen Syntaxfehler in den Keyframes zu enthalten, der die Ausführung der Animation verhindert. Lassen Sie uns auf die Besonderheiten des Problems eingehen und die notwendigen Korrekturen vornehmen.

Der Syntaxfehler liegt in den „from“- und „to“-Eigenschaften innerhalb der Keyframes-Deklarationen. Bei modernen Browsern funktioniert die Transformationseigenschaft „transform“ effektiver als Herstellerpräfixe wie „-webkit-transform“ und „-moz-transform“. Darüber hinaus sollte die „to“-Eigenschaft auf 100 % statt auf „from“ definiert werden.

Hier ist der korrigierte CSS-Code:

.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); 
    } 
}

Im korrigierten Code die „from“-Eigenschaft wurde entfernt und der Transformationswert in der Eigenschaft „to“ wurde auf „rotate(360deg)“ aktualisiert. Darüber hinaus verwenden die Keyframes-Regeln jetzt nur noch „transformieren“ ohne Herstellerpräfixe.

Dieses korrigierte CSS sollte das Animationsproblem beheben, sodass sich das Bild reibungslos um 360 Grad drehen kann.

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine 360-Grad-Bilddrehung in CSS3 nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!