translateX e translateY sullo stesso elemento?

Question

È possibile applicare un CC tradurre X e Y sullo stesso elemento?

Se provo questo il translateX viene sostituito dal translateY:

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

Answer 1

si può fare qualcosa di simile

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

Answer 2

Nel tuo caso, è possibile applicare entrambe le traduzioni X e Y con il translate proprietà:

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

[source: MDN]

per il vostro esempio, sarebbe simile a questa:

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

---

Come affermato da questa risposta How to apply multiple transforms in CSS3? è possibile applicare diverse trasformazioni sullo stesso elemento da loro specificando sulla stessa dichiarazione:

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

Answer 3

È possibile combinare X e Y si traduce in una sola espressione:

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

e, in generale, molti si trasforma in una sola regola:

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