Transition qui ne fonctionne pas sur Firefox

Bonjour,

Et d'abord merci à tous pour ce que j'ai appris sur ce site, ce forum et les livres HTML5 et CSS3.

J'ai créé une transition qui fonctionne bien sur Safari (Mac et iOs8) et IE 10, mais pas sur Firefox (41.0.1).
J'essaie d'obtenir un livre qui s'ouvre (voir image jointe). Je ne souhaite la mettre en prod que si c'est viable multiplateforme et browser récent. Est ce possible ? Qu'ai-je manqué ?

Par ailleurs, j'essaie de faire ça uniquement en CSS, mais dès que la souris se déplace, un hover est généré (évidemment) et la "couverture" se referme. Y'a-t-il moyen de "neutraliser" les hover suivants uniquement en CSS (i.e sans passer par JS).

Les codes sont visibles ici
Une image jointe de ce que j'arrive à obtenir sur Safari.
http://forum.alsacreations.com/upload/60088-ouvrelivre.jpg
Merci par avance pour vos retours.
Modifié par 6l20 (05 Oct 2015 - 23:01)

J'ai beau faire "joindre une image" (74Ko) elle n'apparait pas dans le message. Désolée

Bonsoir Ohweb,

Et merci de ta réponse. Justement mon défi c'est de ne pas utiliser JS
Je suis sûre qu'en utilisant Javascript, j'y arriverai forcément.

L'objectif est vraiment que le livre s'ouvre quand le pointeur de l'internaute se ballade sur la couverture. Cela fonctionne relativement bien en webkit, et je ne trouve pas pourquoi Gecko ne veut rien entendre. Et je suis intimement persuadée que ça doit être réalisable avec les dernières technos CSS.

Pour le côté maîtrise du hover, je veux bien me résoudre à passer en JS s'il n'y a pas de solution en pure CSS. Par contre, çà ne résoudra mon problème de compatibilité Firefox qui me laisse perplexe. J'ai beau chercher sur MDN, sur w3school, ici, je ne vois pas où est ce que je me suis trompée et comment contourner ça

P.S: Merci 6I20 pour la récupération de l'image.

Merci Jencal. Je vais poursuivre alors. Je partagerai le résultat final.