Discussion :

[pikatchoum]

Bonjour,

J'ai un soucis avec les navigateurs basé sur webkit. Je suis d'essayer de faire un effet de transition en css qui donne l'illusion d'une page qui se tourne pour une application sous IOS.

Voici le code : http://jsfiddle.net/et4ZQ/29/

Sous firefox par exemple il n'y a aucun problème. Par contre sur les navigateur webkit (chrome, safari mobile ou desktop), on peut voir la page 1 avoir des soubresauts vers le bas durant l'animation. Cet effet est encore plus accentué sur IOS (encore plus quand le téléphone rame un peu).
Ceci est, je pense, du au fait que les transitions ne sont pas parfaitement synchronisé. La transition de #frontface et de #frontface .page > .content sont pourtant parfaitement opposé ...

Y-a-t-il un moyen pour que ma transition soit parfaite comme sur firefox ?

Merci d'avances pour vos réponses, je reste a disposition pour les questions !

[rodolphebrd]

Bonjour,

Il y a des solutions en Jquery vu que vous chargez la bibliothèque pour le clic.

[pikatchoum]

Bonjour,

Effectivement il existe des solutions en javascript comme turn.js, le soucis c'est que je dois utiliser ce template d'animation dans une application IOS / android et pas seulement sur PC, et que les solutions en javascript sont très lentes sur mobile...

[NoSmoking]

Bonjour,
peut être un mieux avec transform-style: preserve-3d;, à voir et tester.

[pikatchoum]

Même avec le preserve-3d ça ne change rien. Pour résoudre mon problème j'ai changé l'animation de transition. Plutôt que d'avoir un retournement de page qui partait du coin en bas a droite, qui requière une rotation et des déplacement de transform-origin, j'ai opté pour une animation verticale sans rotation, juste avec des translations.

Cette animation beaucoup plus simple fonctionne parfaitement sur webkit.

C'est dommage mais parfois il faut savoir s'avouer vaincu !

Merci a ceux qui m'ont aidé !