translateX und translateY auf demselben Element?

Question

Ist es möglich, ein CC translate X und Y auf das gleiche Element anzuwenden?

Wenn ich das versuchen die translateX vom translateY außer Kraft gesetzt wird:

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

Answer 1

Sie können in Ihrem Fall

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

Answer 2

wie diese etwas tun, können Sie beide X und Y Übersetzungen mit der Anwendung translate Eigenschaft:

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

[source: MDN]

für Ihr Beispiel würde es so aussehen:

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

---

Wie diese Antwort angegeben How to apply multiple transforms in CSS3? Sie sie auf der gleichen Erklärung durch Angabe mehrere Transformationen auf demselben Element anwenden können:

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

Answer 3

Sie X und Y schlägt sich in einem einzigen Ausdruck kombinieren:

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

Und in der Regel mehr Transformationen in eine einzige Regel:

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