CSS-Transformationsübergang funktioniert nicht ordnungsgemäß (Chrome)

8

Hinweis: Diese Frage erfordert eine Erläuterung der CSS-Transformationsausgabe in Chrome.

Beschreibung

  • Ich habe eine Raute mit css skew und rotate transforms erstellt.

  • Ich habe :hover pseudo-class zu diesem Element hinzugefügt und seinen Neigungswinkel geändert.

Das erwartete Ergebnis war, dass sich beim Schweben der Raute der Winkel der Raute ändert.

Hier ist die Geige und Snippet:

%Vor% %Vor%

Problem

Dies funktioniert auf Firefox v35.0.1 und IE v10 . Siehe die Ausgabe unten:

Aber auf Chrome 40.0.2214.115 scheint die Ausgabe anders zu sein. Der Winkel der Raute ändert sich, aber nicht gleichmäßig. Und gegen Ende des Übergangs der Transformationseigenschaft "schreitet" der Rhombus zum gewünschten Ausgang, anstatt ihn übergangsweise zu transformieren Es arbeitet weder mit skewX(Xdeg) skewY(Ydeg) noch skew(Xdeg, Ydeg) : Geige .

Die GC -Ausgabe ist unten:

Frage: Chrome scheint das veraltete skew(Xdeg, Ydeg) zu unterstützen, aber die Ausgabe mit dem Übergang ist fehlerhaft. * Was verursacht diese seltsame Ausgabe mit Chrom? **

Hinweis: Dieser Effekt ist auch mit scaleX transform möglich, aber dies ist eine absichtlich gestellte Frage.

    
The Pragmatick 20.02.2015, 12:03
quelle

2 Antworten

1

Sie könnten versuchen, clip-path: polygon() zu verwenden, um denselben Effekt zu erzielen. Wird leider noch nicht in allen Browsern unterstützt.

%Vor% %Vor%
    
Ryan 18.03.2015 18:16
quelle
-2

Ich habe jetzt mit Übergängen an Chrom gearbeitet. Ich finde Positions-Tags wie diese.

%Vor%

Übergänge funktionieren in Chrome.

Hier sind einige Ressourcen - Ссылка - Ссылка

Ich hoffe, es hat geholfen:)

    
Rubysoccerpro 22.02.2015 04:27
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Deaktivierung der schwarzen Unterstreichung für Text im HTML-Eingabefeld