फ़ंक्शन translate

फ़ंक्शन translate एलिमेंट को X अक्ष और Y अक्ष पर शिफ्ट करता है। इसका उपयोग प्रॉपर्टी transform के साथ किया जाता है। इसका मान साइज की कोई भी यूनिट हो सकता है।

यह एक या दो पैरामीटर ले सकता है। यदि पैरामीटर दो हैं - तो पहला पैरामीटर X अक्ष पर शिफ्ट निर्धारित करता है, और दूसरा - Y अक्ष पर। यदि पैरामीटर एक है, तो वह X अक्ष पर शिफ्ट निर्धारित करता है।

पैरामीटर्स के मान पॉजिटिव और नेगेटिव दोनों हो सकते हैं। X अक्ष पर पॉजिटिव मान दाईं ओर शिफ्ट करता है, नेगेटिव - बाईं ओर। Y अक्ष पर पॉजिटिव मान नीचे की ओर शिफ्ट करता है, नेगेटिव - ऊपर की ओर।

सिंटैक्स

cssसिलेक्टर {
  transform: translate(X अक्ष पर शिफ्ट, Y अक्ष पर शिफ्ट);
}

उदाहरण

यदि ब्लॉक पर माउस ले जाया जाए - तो वह दाईं ओर 30px शिफ्ट हो जाएगा:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translate(30px);
}

Результат:

उदाहरण

यदि ब्लॉक पर माउस ले जाया जाए - तो वह बाईं ओर 30px शिफ्ट हो जाएगा:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translate(-30px);
}

Результат:

उदाहरण

यदि ब्लॉक पर माउस ले जाया जाए - तो वह दाईं ओर 15px और नीचे 30px शिफ्ट हो जाएगा:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translate(15px, 30px);
}

Результат:

यह भी देखें