Jaja, azt elsőre is értettem, hogy forgatnád, de az nem jó.
Most rákerestem, és megtaláltam a kép eredetijét:
ELŐTTE:
UTÁNA:
Szóval itt nincs forgatás, csak le van csapva a 4 sarka.
===
"Szóval a CSS animációk a böngészőt a létező legkevésbé megterhelő funkciók. Megkockáztatom, hogy mondjuk egy 100 képből álló gyűjteményt az általam mondott módszerrel elforgatni kevesebb erőforrást igényel, mint 100-szor felvenni egy felesleges html node-ot, és azt css-el a képek fölé ügyeskedni.
Mert gondoljunk már bele, a második módszernél van 100 tök felesleges képed, amit ugyan csak 1-szer, de le kell töltenie, 100-szor le kell renderelnie, memóriába kell tartania, 100-szor pozícionálnia kell."
Na ez az, amit én sem vágok, ezért lennék kíváncsi rá, hogy vajon melyik az igaz. Nekem az, hogy egy tök sima fehér képet 100-szor le kell renderelnie a böngészőnek, egyáltalán nem tűnik egy nagy valaminek, mert 100 HTML node az igazából nem sok. Azt is lehet esetleg itt kerülő megoldásként, hogy egy max. 2*2 pixeles fehér képet kinyújtasz, sokszorosítasz, akár background-image-ként, de az igazán ötletes megoldás nekem nem jut eszembe még a fentire (a forgatást továbbra sem vágom, hogyan oldja meg a dolgot).
Mindenesetre abban én közel sem vagyok biztos, hogy a böngészőt legkevésbé megterhelő funkciók a CSS-animációk, már amennyiben nincs egy böngészőben például hardware acceleration engedélyezve (GPU-rásegítés). Sőt, Firefox nem is olyan régi változataiban például a transition használatánál a CPU-használat bizonyos esetekben elég durván elszaladhat, még annak idején, amikor ez a kérdés megjelent, kipróbáltam ezt Firefoxban, és tényleg csak úgy zabálta a procit:
http://stackoverflow.com/questions/10354742/css3-transition-of-background-image-for-firefox-not-working
persze ez nyilván szar implementáció eredménye a CSS3 transition property a Firefoxban, és gondolom azóta javították (nem igazán használok FF-ot), csak azért jeleztem, mert önmagában még nem biztos, hogy igaz, hogy a CSS3-animációk spórolnak az erőforrásokkal.
Sk8erPeter