Czy istnieje sposób użycia CSS -transform i nie wpływać na elementy podrzędne

Question

Utworzono mockup, aby zademonstrować mój problem. Obawiam się, że rozwiązanie to dotyczy tego, co zrobiłem w pierwszym przykładzie (pole 1).

Po prostu nie wiem, dlaczego nie mogę zastosować przekształcenia css do elementu nadrzędnego i unikać stosowania go do elementu podrzędnego lub przynajmniej go przesłonić.

Daj mi znać, jeśli istnieje sposób na uzyskanie efektu z pierwszego przykładu za pomocą właściwości transform. Nie chcę też skalować drugiego obrazu. Tylko div rodziców.

---

Uwaga

Próbuję użyć tej właściwości, aby umożliwić akcelerację GPU.

Answer 1

Chciałem użyć -transform, aby uzyskać profit wydajnościowy GPU. Sądzę, że będę nadal używać animacji szerokości: http://jsfiddle.net/Vyaf3/22/, ale z zastosowaniem właściwości css3, która umożliwi przyspieszenie GPU.

Answer 2

Nie odtwarzałem tego w żadnej innej przeglądarce, ale w chrome.

Wygląda jednak na to, że ukryty zestaw przelewowy na elemencie nadrzędnym oznacza zmianę wielkości dziedziczenia na obrazie.

Jeśli więc ustawisz przepełnienie automatyczne w polach, do których zastosowano animację, powinno to naprawić dziedziczenie zmiany rozmiaru.

http://jsfiddle.net/gnrlbzik/5Q8EC/ testuje ustawienie przepełnienia na auto, które zachowuje wymiary obrazu w takcie.

Answer 3

Aby być semantycznym, nie powinniśmy być w stanie powstrzymać go przed przekształceniem elementu potomnego będącego transformacją/skalowaniem jego kontenera, a nie jego zmieniania. Transformacja to nie tylko animacja szerokości, jak przykład w polu 1, to skalowanie x.

Uważam, że to pytanie dotyczy próby zwiększenia wydajności dzięki funkcjom wykorzystującym GPU do przetwarzania animacji. Jest to możliwe, jak sądzę, poprzez skuteczne potraktowanie elementów jako obrazu, który następnie animuje GPU. W ten sposób nie jesteś w stanie mieć wewnątrz elementu, który dynamicznie zachowuje swój rozmiar/kształt podczas animacji. Być może istnieje sposób na przeciwdziałanie animacji poprzez przekształcenie elementu, który chciałbyś zachować statycznie, ale prawdopodobnie nie będzie to efektywne ani wydajne.

Uwaga: Nie jestem dobrze zorientowany w technologii, której używa webkit do renderowania tych transformacji. Przykro mi, jeśli dokładniejsze szczegóły renderowania nie są dokładne. Zaktualizuję to, jeśli ktoś napisze lepszy opis działania transformacji.