Heim > Web-Frontend > CSS-Tutorial > Warum funktioniert meine 360-Grad-Bilddrehung in CSS3 nicht?

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

Barbara Streisand
Freigeben: 2024-12-17 06:30:25
Original
774 Leute haben es durchsucht

Why Isn't My CSS3 360-Degree Image Rotation Working?

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); 
    } 
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage