সিএসএস৩ ২ ডি ট্রান্সফর্ম - Css3 2D Transform



2D transform ব্যবহার করে কোন এইচটিএমএল এলিমেন্ট এর অবস্থান পরিবর্তন করা যায়। সিএসএস ৩ এর transform এর বিভিন্ন মেথড যেমন- translate(), scale(), rotate(), skew() ইত্যাদি ব্যবহার করে কোন এলিমেন্টের উপর বিভিন্ন প্রভাব বা effect তৈরি করা যায়। অর্থাৎ ট্রান্সফর্মেশন এর মাধ্যমে কোন এলিমেন্টের আকার, আকৃতি, দিক এবং অবস্থান পরিবর্তন করা যায়।


translate() মেথড

Translate Method

translate() মেথড কোন একটি এলিমেন্টের বর্তমান অবস্থান পরিবর্তন করতে পারে। translate() মেথডে দুটি প্যারামিটার ব্যবহার করা যায়। যেখানে প্রথম প্যারামিটার দ্বারা X-অক্ষ এবং দ্বিতীয় প্যারামিটার দ্বারা Y-অক্ষ নির্ধারণ করা হয়।

নিচে একটি উদাহরণ দেখুন যেখানে আমরা একটি div এলিমেন্টকে বর্তমান অবস্থান থেকে ডানে 50 পিক্সেল এবং নিচে 50 পিক্সেল সরিয়েছি।

উদাহরণ

div{
-ms-transform: translate(50px, 50px); /* for IE 9 */
-webkit-transform: translate(50px, 50px); /* for Safari */
transform: translate(50px, 50px);
}



rotate() মেথড

Rotate Method

সিএসএস ৩ এর rotate() মেথড ব্যবহার করে কোন এইচটিএমএল এলিমেন্টকে নির্ধারিত কোণ অনুযায়ী ঘড়ির কাঁটার দিকে অথবা ঘড়ির কাঁটার বিপরীত দিকে ঘুরানো যায়।

নিচে একটি উদাহরণ দেখুন যেখানে আমরা একটি div এলিমেন্টকে বর্তমান অবস্থান থেকে ঘড়ির কাঁটার দিকে ডানে 25 ডিগ্রি কোণে সরিয়েছি।

উদাহরণ

div{
-ms-transform: rotate(25deg); /* for IE 9 */
-webkit-transform: rotate(25deg); /* for Safari */
transform: rotate(25deg);
}


rotate() মেথডের দ্বারা কোন এইচটিএমএল এলিমেন্টকে বামে অর্থাৎ ঘড়ির কাটার বিপরীত দিকে ঘুরানোর জন্য নেগেটিভ মান বা value ব্যবহার করতে হবে।

নিচে একটি উদাহরণ দেখুন যেখানে আমরা একটি div এলিমেন্টকে বর্তমান অবস্থান থেকে ঘড়ির কাটার বিপরীত দিকে অর্থাৎ বামে 25 ডিগ্রি কোণে সরিয়েছি।

উদাহরণ

div{
-ms-transform: rotate(-25deg); /* for IE 9 */
-webkit-transform: rotate(-25deg); /* for Safari */
transform: rotate(-25deg);
}




scale() মেথড

Scale Method

সিএসএস ৩ এর scale() মেথড ব্যবহার করে কোন এইচটিএমএল এলিমেন্টের আকার হ্রাস বা বৃদ্ধি করা যায়।

নিচে একটি উদাহরণ দেখুন যেখানে একটি div এলিমেন্টকে বর্তমান আকৃতি থেকে দৈর্ঘ্যে 2 গুন এবং প্রস্থে 3 গুন বৃদ্ধি করা হয়েছে।

উদাহরণ

div{
-ms-transform: scale(2, 3); /* for IE 9 */
-webkit-transform: scale(2, 3); /* for Safari */
transform: scale(2, 3);
}


নিচে একটি উদাহরণ দেখুন যেখানে, একটি div এলিমেন্টকে বর্তমান আকৃতি থেকে দৈর্ঘ্যে ও প্রস্থে অর্ধেক হ্রাস করা হয়েছে।

উদাহরণ

div{
-ms-transform: scale(0.5, 0.5); /* for IE 9 */
-webkit-transform: scale(0.5, 0.5); /* for Safari */
transform: scale(0.5, 0.5);
}




skewX() মেথড

সিএসএস ৩ এর skewX() মেথড ব্যবহার করে কোন এইচটিএমএল এলিমেন্টকে X-অক্ষের সাপেক্ষে নির্দিষ্ট কোন কৌণিক অবস্থানে অর্থাৎ তির্যকভাবে স্থাপন করা যায়।

নিচের উদাহরণে আমরা একটি div এলিমেন্টের অবস্থান তির্যকভাবে X-অক্ষের সাপেক্ষে 20 ডিগ্রী পরিবর্তন করেছি।

উদাহরণ

div{
-ms-transform: skewX(20deg); /* for IE 9 */
-webkit-transform: skewX(20deg); /* for Safari */
transform: skewX(20deg);
}




skewY() মেথড

সিএসএস ৩ এর skewY() মেথড ব্যবহার করে কোন এইচটিএমএল এলিমেন্টকে Y-অক্ষের সাপেক্ষে নির্দিষ্ট কোন কৌণিক অবস্থানে অর্থাৎ তির্যকভাবে স্থাপন করা যায়।

নিচের উদাহরণে আমরা একটি div এলিমেন্টের অবস্থান তির্যকভাবে Y-অক্ষের সাপেক্ষে 20 ডিগ্রী পরিবর্তন করেছি।

উদাহরণ

div{
-ms-transform: skewY(20deg); /* for IE 9 */
-webkit-transform: skewY(20deg); /* for Safari */
transform: skewY(20deg);
}




skew() মেথড

সিএসএস ৩ এর skew() মেথড ব্যবহার করে কোন এইচটিএমএল এলিমেন্টকে X এবং Y-অক্ষের সাপেক্ষে নির্দিষ্ট কোনে অবস্থান অর্থাৎ তির্যকভাবে স্থাপন করা যায়।

নিচের উদাহরণে আমরা একটি div এলিমেন্টের অবস্থান তির্যকভাবে X-অক্ষের সাপেক্ষে 15 ডিগ্রী এবং Y-অক্ষের সাপেক্ষে 20 ডিগ্রী পরিবর্তন করেছি।

উদাহরণ

div{
-ms-transform: skew(15deg, 20deg); /* for IE 9 */
-webkit-transform: skew(15deg, 20deg); /* for Safari */
transform: skew(15deg, 20deg);
}


নোট - skew() মেথডে দুটি প্যারামিটার ব্যবহার করা হয়। যদি কোনো ক্ষেত্রে দ্বিতীয় প্যারামিটারটি উল্লেখ করা না হয় তাহলে এটির মান বা value ডিফল্টভাবে শূন্য হয়।

নিচের উদাহরনে আমরা skew() মেথডে একটি মাত্র প্যারামিটার নির্দিষ্ট করেছি, তাই div এলিমেন্টটি শুধুমাত্র X-অক্ষের সাপেক্ষেই অবস্থান পরিবর্তন করেছে।

উদাহরণ

div{
-ms-transform: skew(20deg); /* for IE 9 */
-webkit-transform: skew(20deg); /* for Safari */
transform: skew(20deg);
}




matrix() মেথড

সিএসএস ৩ এর matrix() মেথড এর মাধ্যমে 2D ট্রান্সফর্মে ব্যবহৃত সবগুলো মেথডকে একত্রে ব্যবহার করা যায়। অর্থাৎ matrix() মেথড কে এককথায় 2D ট্রান্সফর্মের শর্টহ্যান্ড প্রপার্টি বলা যেতে পারে।
matrix() মেথডে ৬টি প্যারামিটার থাকে। যা একটি এলিমেন্টকে rotate, scale, translate এবং skew করতে পারে। প্যারামিটার গুলো হল - scaleX,skewY,skewX,scaleY,translateX এবং translateY.

নিচে এর সিনট্যাক্স দেখুন।

সিনট্যাক্স

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())



নিচে matrix মেথড এর একটি উদাহরণ দেখুন।

উদাহরণ

div{
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* for IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* for Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}




ব্রাউজার সাপোর্ট

টেবিলে দেয়া রো গুলোর প্রথম লাইন ব্রাউজারের সেই প্রথম ভার্সন নির্দেশ করে যেগুলো পুরোপুরি এই প্রপার্টি সাপোর্ট করে। এছাড়াও এর পরের লাইন -webkit-, -moz- বা -o- যুক্ত ভার্সন গুলো নির্দেশ করে ব্রাউজারের ঐ প্রথম ভার্সন যেগুলো কোন প্রিফিক্স ব্যবহার করে প্রদর্শিত হতে পারে।

প্রপার্টি
transform 36.0
4.0 -webkit-
10.0
9.0 -ms-
16.0
3.5 -moz-
9.0
3.2 -webkit-
23.0
15.0 -webkit-
12.1
10.5 -o-
transform-origin
(two-value syntax)
36.0
4.0 -webkit-
10.0
9.0 -ms-
16.0
3.5 -moz-
9.0
3.2 -webkit-
23.0
15.0 -webkit-
12.1
10.5 -o-


সকল ট্রান্সফর্ম প্রোপার্টি

প্রপার্টি বর্ণনা
transformএটি ব্যবহার করে আপনি একটি এলিমেন্টে 2D অথবা 3D ট্রান্সফর্মেশন প্রয়োগ করতে পারবেন।
transform-originএটি ব্যবহার করে আপনি ট্রান্সফর্মেশন-এলিমেন্টের অবস্থানের পরিবর্তন ঘটাতে পারবেন।

সকল 2D ট্রান্সফর্ম মেথড

প্রপার্টি বর্ণনা
translate()2D ট্রান্সফর্মেশনের মাধ্যমে একটি এলিমেন্টের অবস্থান পরিবর্তন করতে পারে।
rotate()2D ট্রান্সফর্মেশনের মাধ্যমে একটি এলিমেন্টকে ঘড়ির কাটার দিকে বা বিপরীত দিকে ঘুরাতে পারে।
scale()2D ট্রান্সফর্মেশনের মাধ্যমে একটি এলিমেন্টের আকার বৃদ্ধি অথবা হ্রাস করতে পারে।
skew()2D ট্রান্সফর্মেশনের মাধ্যমে একটি এলিমেন্টের আকৃতি তির্যকভাবে পরিবর্তন করতে পারে।
matrix()সবগুলো 2D ট্রান্সফর্মেশন মেথড একত্রে ব্যবহার করার সংক্ষিপ্ত রূপ।







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.