এই অধ্যায়ে আপনি 2D transform এর মাধ্যমে একটি এইচটিএমএল এলিমেন্ট এর অবস্থান পরিবর্তন করা শিখবেন।
সিএসএস(৩) transform এর বিভিন্ন মেথড যেমন- translate(), scale(), rotate(), skew() ইত্যাদি ব্যবহার করে আপনি একটি এলিমেন্টের উপর বিভিন্ন প্রভাব(effect) ফেলতে পারেন।
সুতরাং ট্রান্সফর্মেশন এর মাধ্যমে আপনি একটি এলিমেন্টের আকার, আকৃতি, দিক এবং অবস্থান পরিবর্তন করতে পারবেন।
এক নজরে সিএসএস(৩) ট্রান্সফর্ম প্রোপার্টিসমূহ
এক নজরে সিএসএস(৩) 2D ট্রান্সফর্ম মেথডসমূহ
translate() মেথড
translate() মেথড একটি এলিমেন্টের বর্তমান অবস্থান পরিবর্তন করতে পারে। আমরা translate() মেথডে দুটি প্যারামিটার ব্যবহার করতে পারি। যেখানে প্রথম প্যারামিটার দ্বারা X-অক্ষ এবং দ্বিতীয় প্যারামিটার দ্বারা Y-অক্ষ নির্দেশ করে।
নিম্নের উদাহরণে আমরা <div> এলিমেন্টটিকে বর্তমান অবস্থান থেকে ডানে ৩০ পিক্সেল এবং নিচে ৩০ পিক্সেল সরাবোঃ
kt_satt_skill_example_id=1586
সিএসএস(৩) translate মেথডসমূহঃ
rotate() মেথড
সিএসএস(৩) rotate() মেথড 2D Transformation এর মাধ্যমে একটি এলিমেন্টকে প্রদত্ত ডিগ্রী অনুযায়ী ঘড়ির কাঁটার দিকে অথবা বিপরীত দিকে ঘুরায়।
kt_satt_skill_example_id=1590
rotate() মেথডে নেগেটিভ ভ্যালু ব্যবহার করলে এটি একটি এলিমেন্টকে ঘড়ির কাটার বিপরীত দিকে ঘুরায়।
kt_satt_skill_example_id=1594
সিএসএস(৩) rotate মেথডঃ
scale() মেথড
সিএসএস(৩) scale() মেথড 2D Transformation এর মাধ্যমে একটি এলিমেন্টের আকার বৃদ্ধি অথবা হ্রাস করে।
kt_satt_skill_example_id=1598
skew() মেথড
সিএসএস(৩) skew() মেথড প্রদত্ত কোণদ্বয় অনুযায়ী X এবং Y-অক্ষের সাপেক্ষে একটি এলিমেন্টর অবস্থান তির্যকভাবে পরিবর্তন করে।
নিম্নের উদাহরণে আমরা <div> এলিমেন্টের অবস্থান তির্যকভাবে X-অক্ষের সাপেক্ষে ১০ডিগ্রী এবং Y-অক্ষের সাপেক্ষে ১৫ডিগ্রী পরিবর্তন করবোঃ
kt_satt_skill_example_id=1601
skew() মেথডের মধ্যে দুটি প্যারামিটার ব্যবহার করা হয়। যদি কোনো ক্ষেত্রে দ্বিতীয় প্যারামিটারটি উল্লেখ করা না হয় তাহলে এটির ভ্যালু ডিফল্টভাবে শূন্য হয়।
নিম্নের উদাহরণে skew() মেথডে একটি মাত্র প্যারামিটার ব্যবহার করায় <div> এলিমেন্টেটি শুধুমাত্র X-অক্ষের সাপেক্ষে ১৫ডিগ্রী তির্যক ভাবে ঘুরবেঃ
kt_satt_skill_example_id=1602
সিএসএস(৩) skew মেথডসমূহঃ
matrix() মেথড
সিএসএস(৩) matrix() মেথড এর মাধ্যমে 2D ট্রান্সফর্মে ব্যবহৃত সবগুলো মেথড একত্রে ব্যবহার করা যায়।
matrix() মেথডে ৬টি প্যারামিটার থাকে। যা একটি এলিমেন্টকে rotate, scale, translate এবং skew করে।
ম্যাট্রিক্স এর গঠনঃ
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())kt_satt_skill_example_id=1606
সিএসএস(৩) matrix মেথডঃ
ব্রাউজার সাপোর্ট
Read more
