ফাংশন 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);
}

Результат:

আরও দেখুন