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

Question

est-il possible d'appliquer un CC translate 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%);
}

33

css css-transforms css3

demandé sur web-tiki 2015-04-15 14:03:03

3 réponses

score 52 · Answer 1

Vous pouvez faire quelque chose comme cela

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

52

répondu Akshay 2015-04-15 11:05:28

score 6 · Answer 2

dans votre cas, vous pouvez appliquer à la fois X et Y traductions avec le translate propriété:

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

pour votre exemple, il ressemblerait à ceci:

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

DÉMO:

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

<div></div>

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

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

score 4 · Answer 3

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 se transforme en une seule règle:

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