CSS translate এসপ্যাট্রি

সংজ্ঞা ও ব্যবহার

translate বৈশিষ্ট্যটি উপাদানের অবস্থান পরিবর্তন করতে পারে

translate বৈশিষ্ট্যটি উপাদানকে দুই-মাত্রাকালীন স্পেসের একক নির্ধারণ করে। আপনি একটি z-অক্ষ কোণ্ডিশনও নির্ধারণ করতে পারেন যাতে তিন-মাত্রাকালীন স্পেসে অবস্থান পরিবর্তন করেন

অক্ষগুলি শুধুমাত্র x-অক্ষ কোণ্ডিশন, x-অক্ষ এবং y-অক্ষ কোণ্ডিশন, বা x-অক্ষ, y-অক্ষ এবং z-অক্ষ কোণ্ডিশন দেওয়া হতে পারে

উপযুক্ত বোঝার জন্য translate বৈশিষ্ট্য, দেখুনপ্রদর্শন

ট্যাক্সিট:z-অক্ষ বৈশিষ্ট্যটি কার্যকর করতে, আপনাকে CSS perspective বৈশিষ্ট্যটির মান নির্ধারণ করতে হবে

নোট:উপাদানকে সরাসরি সরিয়ে নিতে আরেকটি প্রযুক্তি হলো CSS translate() ফাংশন এই পাতায় CSS transform বৈশিষ্ট্যটির উপর, CSS translate বৈশিষ্ট্যটি একটি সহজ এবং সরাসরি পদ্ধতি হিসাবে উল্লেখ করা হয়েছে যাতে উপাদানকে সরাসরি সরিয়ে নিতে হয়

প্রকল্প

উদাহরণ 1

উপাদানের অবস্থান পরিবর্তন করা:

div {
  translate: 100px 20px;
}

আপনার নিজেই প্রয়াস করুন

উদাহরণ 2

z-অক্ষের translate বৈশিষ্ট্যটি নিয়ে পরিবর্তন করতে, তাহলে পিতৃতত্ত্বকারী উপাদানেও এই বৈশিষ্ট্যটি নিয়ে পরিবর্তন করতে হবে perspective আমরা কোনও প্রভাব দেখতে পাইয়ে তা হলে, তাহলে আমরা এই বৈশিষ্ট্যটি নিয়ে পরিবর্তন করতে পারি:

DIV1 {
  perspective: 200px;
}
DIV2 {
  translate: 50px 50px 50px;
}

আপনার নিজেই প্রয়াস করুন

CSS বিন্যাস

translate: x-axis y-axis z-axis|initial|inherit;

বৈশিষ্ট্য মান

মান বর্ণনা
x-axis

x-অক্ষের ওপর অবস্থান নির্ধারণ করে। সম্ভাব্য মান:

  • দৈর্ঘ্য
  • শতকরা
y-axis

y-অক্ষের ওপর অবস্থান নির্ধারণ করে। সম্ভাব্য মান:

  • দৈর্ঘ্য
  • শতকরা
z-axis

z-অক্ষের ওপর অবস্থান নির্ধারণ করে। সম্ভাব্য মান:

  • দৈর্ঘ্য
  • শতকরা
initial এই বৈশিষ্ট্যটিকে তার ডিফল্ট মানে নিয়ে নিন। দেখুন initial
inherit এই বৈশিষ্ট্যটি তার পিতৃতত্ত্বকারী উপাদান থেকে উত্তরাধিকার নেয়। দেখুন inherit

প্রযুক্তিগত বিবরণ

ডিফল্ট মান: none
প্রবর্তনকারী: না
অ্যানিমেশন নির্মাণ: সমর্থন করা হয়: দেখুনঅ্যানিমেশন-সংশ্লিষ্ট বৈশিষ্ট্য
সংস্করণঃ CSS3
JavaScript বিন্যাসঃ object.style.translate="10px 20px"

ব্রাউজার সমর্থন

টেবিলের সংখ্যা এই ব্যবস্থাপনাটি সম্পূর্ণরূপে সমর্থনকারী প্রথম ব্রাউজার সংস্করণটির জন্য

Chrome Edge Firefox Safari Opera
104 104 72 14.1 90

সংশ্লিষ্ট পাতা

CSS শিক্ষাক্রমঃCSS 2D ট্রান্সফর্ম

CSS শিক্ষাক্রমঃCSS 3D ট্রান্সফর্ম

CSS উপাদানসমূহঃCSS scale প্রক্রিয়া

CSS উপাদানসমূহঃCSS rotate প্রক্রিয়া

CSS উপাদানসমূহঃCSS perspective প্রক্রিয়া