TranslateZ ne fonctionne pas sur Firefox

Par bibi427, il y a 5 ans

Les bases HTML/CSS

Bonjour,

J'approfondi mes connaissances dans les animations CSS et je rencontre un problème de compatibilité avec Firefox (86 comme FDE 87).

J'ai créé une simple rectangle (section) que je veux faire avancer ou reculer dans l'axe de la profondeur. J'ai appliqué une perspective de 1000px sur l'élément parent (wrapper ).

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Comprendre les Transformations 3D</title> <style> body { padding: 100px; } .wrapper { width: 300px; margin: 0 auto; perspective: 1000px; } section { box-sizing: border-box; height: 200px; width: 300px; background: #8C57AC; color: #FFF; font-size: 2em; display: table-cell; text-align: center; vertical-align: middle; border: solid 6px #C68335; border-radius: 15px; transition: 2s; } section:hover { transform: translateZ(-200px); } </style> </head> <body> <div class="wrapper"> <section><p>Animez-moi <p></section> </div> </div> </body> </html>

Cela fonctionne sur plusieurs navigateurs (Chrome, Edge, Opera), mon rectangle glisse vers l'arrière de 200px, sauf sur Firefox et ce malgré que le site Can I Use renseigne que les propriétés perspective et transform: translateZ() sont implémentées sur ce navigateur.
Faut-il utiliser ces propriétés d'une autre manière sur Firefox?

Merci à vous

2 réponses

kurdtkobane, il y a 5 ans

Question un peu conne, mais ton firefox est à jour?
Sinon quel est le comportement d'un translateX ou translateY?

Edit:
Effectivement après un essaie sur codepen.io j'ai le même bug

bibi427, il y a 5 ans

C'est bien la dernière version.
TanslateX et TranslateY pas de problème.
C'est un petit peu comme si l'axe Z n'existait pas. Forcément on ne peut pas glisser sur une axe qui n'existe pas. Pourtant l'inspecteur montre bien que la propriété perspective est bien prise compte.