Bonsoir, 

Malgré l'utilisation du préfixe -webkit-, la div qui subit mon translateZ est bien placée sur Chrome mais très décalée sur Safari.

Je cherche sur différents forums depuis hier mais impossible de trouver une explication et solution. Savez-vous quel peut être le problème et comment le résoudre ?

.container{
  transform-style: preserve-3d;
  -webkit-transform: translateZ(110px) rotateY(0deg) rotateX(0deg) scale(0.3);
  transform: translateZ(110px) rotateY(0deg) rotateX(0deg) scale(0.3);
  

Merci, 

Ricky

-
Edité par RickyDelaper 11 octobre 2017 à 23:42:33

Bonjour,

L'utilisation de translateZ implique que tu désires une perspective dans un espace à trois dimensions. Pour que cela fonctionne tu dois donc ajouter une propriété perspective au parent de l'élément qui subit la transformation.

Plus de détails ici : https://stackoverflow.com/questions/18131864/css3-webkit-transform-translatezxpx-not-working

Plus d'informations sur la propriété perspective : https://developer.mozilla.org/fr/docs/Web/CSS/perspective

Merci pour ta réponse.

J'ai appliqué 'perspective: 800px' et '-webkit-perspective: 800px' sur son parent mais bien que la perspective soit un peu différente, mon .container est toujours très décalé sur Safari par rapport à Chrome.

-
Edité par RickyDelaper 12 octobre 2017 à 10:52:03