translateX и переводY на том же элементе?

Question

Можно ли применить CC-перевод X и Y на один и тот же элемент?

Если я пытаюсь этого translateX переопределяется translateY:

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

Answer 1

Вы можете сделать что-то вроде этого

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

Answer 2

В вашем случае, вы можете применить как X и Y переводы с translate недвижимость:

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

[source: MDN]

для примера, это будет выглядеть следующим образом:

.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>

---

Как заявил этот ответ How to apply multiple transforms in CSS3? вы можете применить несколько преобразований на одном элементе, указав их в той же декларации:

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

Answer 3

Вы можете комбинировать X и Y переводит в одно выражение:

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

И, в общем, несколько преобразований в единое правило:

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