dịchX và dịchY trên cùng một phần tử?

Question

Có thể áp dụng CC dịch X và Y trên cùng một phần tử không?

Nếu tôi cố gắng này translateX được ghi đè bởi các translateY:

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

Answer 1

Bạn có thể làm một cái gì đó như thế này

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

Answer 2

Trong trường hợp của bạn, bạn có thể áp dụng cả hai dịch X và Y với translate thuộc tính:

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

[source: MDN]

ví dụ của bạn, nó sẽ trông như thế này:

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

---

Như đã trình bày bởi câu trả lời này How to apply multiple transforms in CSS3? bạn có thể áp dụng một vài biến đổi trên cùng một nguyên tố bằng cách xác định chúng trên cùng một tuyên bố:

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

Answer 3

Bạn có thể kết hợp X và Y chuyển thành một biểu thức duy nhất:

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

Và, nói chung, một số biến đổi thành một quy tắc duy nhất:

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