CSS translate এসপ্যাট্রি
- পূর্বপাতায় transition-timing-function
- পরবর্তী পৃষ্ঠা unicode-bidi
সংজ্ঞা ও ব্যবহার
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 প্রক্রিয়া
- পূর্বপাতায় transition-timing-function
- পরবর্তী পৃষ্ঠা unicode-bidi