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
bibi427