translateX और उसी तत्व पर अनुवाद?

Question

क्या एक ही तत्व पर एक सीसी अनुवाद एक्स और वाई लागू करना संभव है?

यदि मैं यह कोशिश translateX translateY द्वारा ओवरराइड है:

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

Answer 1

आप इस

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

Answer 2

की तरह कुछ कर सकते हैं आपके मामले में, आप आवेदन कर सकते हैं दोनों के साथ एक्स और वाई अनुवाद translate संपत्ति:

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

[source: MDN]

अपने उदाहरण के लिए

, यह इस प्रकार दिखाई देगा:

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

डेमो:

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

आप एक्स को जोड़ सकते हैं और वाई एक भी अभिव्यक्ति में तब्दील हो:

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

और, एक भी नियम में सामान्य, कई रूपांतरण में:

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