web-dev-qa-db-fra.com

translateX et translateY sur le même élément?

Est-il possible d'appliquer une traduction en CC X et Y sur le même élément?

Si j'essaie cela, le translateX est remplacé par le translateY:

.something { 
        transform: translateX(-50%);
        transform: translateY(-50%);
}
csscss3css-transforms
41
Evanss

Vous pouvez faire quelque chose comme ça

transform:translate(-50%,-50%);
70
Akshay

Dans votre cas, vous pouvez appliquer les traductions X et Y avec la propriété translate:

transform: translate(tx[, ty]) /* one or two <translation-value> values */

[ source: MDN ]

pour votre exemple, cela ressemblerait à ceci:

.something { 
  transform: translate(-50%,-50%);
}

DEMO: 

div{
  position:absolute;
  top:50%; left:50%;
  width:100px; height:100px;
  transform: translate(-50%,-50%);
  background:tomato;
}
<div></div>

Comme indiqué par cette réponse Comment appliquer plusieurs transformations en CSS3? vous pouvez appliquer plusieurs transformations sur le même élément en les spécifiant sur la même déclaration:

.something { 
  transform: translateX(-50%) translateY(-50%);
}
8
web-tiki

Vous pouvez combiner X et Y traduit en une seule expression:

transform: translate(10px, 20px); /* translate X by 10px, y by 20px */

Et, en général, plusieurs transformations en une seule règle:

transform: translateX(10px) translateY(20px) scale(1.5) rotate(45deg);
4
joews