Autor Zpráva
hypot
Profil
Chci dva různé obsahy na jednom prostoru a nejlepší mně přišlo udělat to jako otočení karty a zobrazení její zadní strany. Ve Firefoxu mi to však fungovalo nějak divně, tak jsem pátral po internetu, co jsem opomněl. Našel jsem tuto ukázku na codepen: codepen.io/darkwing/pen/bCali, která patří k článku davidwalsh.name/css-flip. V Gecku ta ukázka funguje stejně divně jako můj výtvor - po otočení se správně zobrazí zadní strana, ale zrcadlově otočené části přední strany prosvítají (v ukázce takto prosvítá nápis David Walsh). Podle diskuse pod článkem pomůže (pro Gecko) přední straně nastavit transform: rotateY(0deg), což v ukázce na codepen není zapsáno. Blink animaci zobrazí podle očekávání ("správně") i bez tohoto dodatku. Otázkou ovšem je WebKit. Podle diskuse pod článkem se mi zdá, že Safari s danou animací nemá problém, jenže já nemám možnost funkčnost v Safari ověřit. Jediné, co můžu použít, je WebKitGTK, což je port WebKitu pro GTK, používaný asi jen na Linuxu. WebKitGTK používá (pokud vím) jako svoje vykreslovací jádro jediný prohlížeč, Gnome Web, jenže v něm daná animace nefunguje (po otočení se stále zobrazí jen přední strana, jen zrcadlově obrácená). V diskusi pod uvedeným článkem je nicméně také uvedeno, že kvůli Internet Exploreru (článek je z roku 2012, myslím) je nutné nastavit animaci oběma stranám "karty" zvlášť, nikoli jejich společnému rodiči (jak je to v ukázce výše a jak jsem to původně udělal i já). Když jsem toto aplikoval, fungovala v Gecku a Blinku, ale opět ne ve WebKitGTK. Je-li pravda, že animace funguje v Safari, vyvozuju z toho, že WebKitGTK obsahuje nějakou chybu, která není v (safařím) WebKitu. Otázka je, zda to první platí, tedy že výše uvedená ukázka z codepenu tak, jak je tam zapsaná, skutečně v Safari funguje. Prosím proto někoho, kdo má přístup k Safari, aby mi sdělil, zda popisovaná animace v Safari skutečně funguje dle očekávání (po otočení se zobrazí zadní strana a bez rušivých průsvitů z popředí).
Kromě uvedené ukázky lze animaci vyzkoušet i na ukázce codepen.io/KurtWM/pen/xhvHe.
Děkuji.
P.S. Měl bych k tomu ještě jeden dotaz, ale počkám s ním zatím.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0