Gibt es eine Möglichkeit, CSS-Transformation zu verwenden und Kinderelemente nicht zu beeinflussen

Question

Ich habe eine mockup erstellt, um mein Problem zu demonstrieren. Ich fürchte, die Lösung fällt in das, was ich mit dem ersten Beispiel gemacht habe (Box1).

Ich bin mir nicht sicher, warum ich eine CSS-Transformation nicht auf ein Elternelement anwenden und vermeiden kann, es auf das Kindelement anzuwenden oder es zumindest zu überschreiben.

Lassen Sie mich wissen, ob es eine Möglichkeit gibt, den Effekt des ersten Beispiels mit der Eigenschaft transform zu erhalten. Ich möchte nicht, dass das zweite Bild ebenfalls skaliert wird. Nur das Elternteil div.

---

Hinweis

ich diese Eigenschaft verwenden ich versucht, die GPU-Beschleunigung zu ermöglichen.

Answer 1

Ich wollte -Transform verwenden, um die GPU-Leistung zu erhalten. Ich schätze, ich werde weiterhin die Breitenanimation verwenden: http://jsfiddle.net/Vyaf3/22/, aber mit einer css3-Eigenschaft, die die GPU-Beschleunigung aktivieren würde.

Answer 2

Habe damit in keinem anderen Browser als dem Chrome gespielt.

Aber es sieht so aus, als ob Überlauf versteckte Satz auf Elternelement Verändern der Vererbung auf Bild bedeutet.

Wenn Sie also in den Feldern, auf die die Animation angewendet wird, Überlauf-Auto einstellen, sollte die Verkleinerung der Größe korrigiert werden.

http://jsfiddle.net/gnrlbzik/5Q8EC/ testet den Überlauf auf auto, wodurch die Bildgröße erhalten bleibt.

Answer 3

Um semantisch zu sein, glaube ich nicht, dass Sie in der Lage sein sollten, es davon abzuhalten, ein untergeordnetes Element zu transformieren/skalieren, ohne es zu vergrößern. Eine Transformation animiert nicht nur die Breite wie in Beispiel 1, sondern skaliert das x.

Ich glaube, bei dieser Frage geht es darum, etwas Leistungssteigerung durch die Verwendung von Funktionen zu erzielen, die die GPU zur Verarbeitung von Animationen verwenden. Dies ist möglich, glaube ich, indem ich die Elemente effektiv als ein Bild behandle, das die GPU dann animiert. Daher ist es nicht möglich, ein Element zu haben, das dynamisch seine Größe/Form während einer Animation behält. Vielleicht gibt es einen Weg, der Animation entgegenzuwirken, indem man das Element, das man statisch behalten möchte, transformiert, aber das wird wahrscheinlich weder effizient noch effektiv sein.

Hinweis: Ich kann nicht gut in der aktuellen Technologie webkit auskenne nutzt diese Transformationen zu machen. Es tut mir leid, wenn die feineren Details des Renderings nicht ganz genau sind. Ich werde dies aktualisieren, wenn jemand mit einer besseren Beschreibung der Funktionsweise von transform kommentiert.