Partage

Problème translateZ selon navigateur

Résultat d'un translateZ différent sur Chrome et Safari

11 octobre 2017 à 23:42:11

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

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
12 octobre 2017 à 9:00:23

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

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
12 octobre 2017 à 10:50:54

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

Problème translateZ selon navigateur

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown