Autor Zpráva
hypot
Profil
Zdravím,
potřeboval bych vytvořit animaci rotace dvou obrázků tak, aby to vypadalo, jako když se (kolem osy Y) otáčí karta, která má na rubu i líci jiný obrázek.
Na internetu jsem našel jeden pěkný vzor (codepen.io/pigner/pen/aWVdeM - obrázek vlevo), jenže to je animace závislá na přejetí myší (transition). Já jsem zkusil tento vzor předělat na @keyframes, ale jak je vidět na ukázce (vpravo na uvedeném odkazu), každý obrázek se otáčí jinou rychlostí, nesynchronně, takže to nedává požadovaný efekt. Prosím o radu, jak to upravit, jelikož si s tím nevím rady. Děkuji.
Keeehi
Profil
Živá ukázka
hypot
Profil
Tak to by mě fakt nenapadlo. Každopádně ještě jednou děkuju.
hypot
Profil
Omlouvám se předem, že sem píšu po tak dlouhé době, nicméně jsem až teď zjistil, že řešení nefunguje v IE 11 (jinde ano).
Zjistil jsem, že problém je v CSS vlastnosti backface-visibility, kterou sice IE 11 papírově podporuje, ale jen u nehybných obrázků; u rotujících nefunguje. (Příklady, které IE 11 nezobrazí správně: tympanus.net/codrops/css_reference/backface-visibility (Live Demo), css-tricks.com/almanac/properties/b/backface-visibility (nadpis Works properly), www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_backfacevisibility (po odškrtnutí zatržítka).)
Nevím, zda se s tím dá něco udělat, aby Keehiho řešení mého původního dotazu plně fungovalo i v IE 11, ale spokojil bych se i s tím, že by v IE 11 na rozdíl od ostatních prohlížečů rotoval aspoň (z pohledu návštěvníka) horní obrázek při jinak stejném kódu. Nevím však, jaká pravidla přidat speciálně jen pro tento prohlížeč (podmíněné komentáře IE od verze 10 už nepodporuje).
Keeehi
Profil
hypot:
No a podporu jakých prohlížečů chceš? Podle toho se dá zvolit řešení.
hypot
Profil
Keeehi:
No, jen IE 11 + ostatní prohlížeče v posledních verzích (u nich jsem na problém nenarazil a jejich starší verze snad už nikdo nepoužívá).
Rararach
Profil *
Prosím jak tu animaci udělat na :hover ? Vyzkoušel jsem tuto třídu přidat postupně na jednotlivé položky ve stylopise a nejelo to, resp. jelo ale nesmyslně (např. se obrázek objevil 2x atp.)... Díky za popostrčení.. R
Bubák
Profil
Koukni na CSS flip a animace

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: