X

X

X

CSS3 2D Transforms । দ্বিমাত্রিক রূপান্তর


CSS3 Transforms

CSS3 transforms প্রপার্টি ব্যবহার করে কোনো ইলামেন্টকে translate, rotate, scale, এবং skew করা যায়। transformation বলতে কোনো ইলামেন্টের ডিফল্ট আকার, আকৃতি ও তার অবস্থান পরিবর্তন করাকে বোঝায়। সিএসএস ৩ তে দ্বিমাত্রিক ও ত্রিমাত্রিক উভয় transformation সাপোর্ট করে।

নিচের ইলামেন্ট দুটিতে মাউস হোভার করে দ্বিমাত্রিক ও ত্রিমাত্রিক transformation দেখুন,

2D rotate
3D rotate

Browser Support : 2D Transforms

প্রপার্টি
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-

CSS3 2D Transform (দ্বিমাত্রিক রূপান্তর)

এই অধ্যায়ে নিম্নোক্ত দ্বিমাত্রিক রূপান্তর সম্পর্কে বর্ণনা করা হবে:

  • translate()
  • rotate()
  • scale()
  • skewX()
  • skewY()
  • matrix()
টিপস: পরবর্তী অধ্যায়ে ত্রিমাত্রিক রূপান্তর সম্পর্কে আলোচনা করা হবে।

translate() Method (ইলামেন্ট স্থানান্তর)

Translate

translate() method ব্যবহার করে কোনো ইলামেন্টকে তার মূল অবস্থান থেকে X ও Y অক্ষের সাপেক্ষে অন্য একটি অবস্থানে উপস্থাপণ করা যায়।

নিচের উদাহরণে একটি <div> element-কে 50 pixel ডানে এবং 100 pixel নিচের অবস্থানে স্থানান্তর করা হলো:

Code Example

div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
    -ms-transform: translate(50px,100px); /* IE 9 */
    -webkit-transform: translate(50px,100px); /* Safari */
    transform: translate(50px,100px); /* Standard syntax */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


rotate() Method

Rotate
The rotate() method ব্যবহার করে কোনো ইলামেন্টের ঘড়ির কাঁটার দিকে বা ঘড়ির কাঁটার বিপরীত দিকে তার ঘূর্ণায়মান অবস্থানের পরিবর্তন করা যায়।

নিচের উদাহরণে একটি <div> ইলামেন্টকে ঘড়ির কাঁটার দিকে ২০ডিগ্রী কোনে ঘুরানো হলো:

Code Example

div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

div#myDiv {
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg); /* Standard syntax */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

কোনের মান ঋণাত্মক হলে এটি ঘড়ির কাঁটার বিপরীত দিকে ঘূরে যায়।

নিচের উদাহরণে একটি <div> ইলামেন্টকে ঘড়ির কাঁটার বিপরীত দিকে ২০ডিগ্রী কোনে ঘুরানো হলো:

Code Example

div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

div#myDiv {
    -ms-transform: rotate(-20deg); /* IE 9 */
    -webkit-transform: rotate(-20deg); /* Safari */
    transform: rotate(-20deg); /* Standard syntax */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


scale() Method

Scale

কোনো ইলামেন্টের আকার ছোটো বা বড় করার জন্য scale() method ব্যবহার করা হয়।

নিচের উদাহরণে একটি <div> ইলামেন্টকে তার মূল প্রস্থের চেয়ে দ্বিগুন এবং উচ্চতার তিনগুন আকারে উপস্থাপণ করা হলো:

Code Example

div {
    margin: 150px;
    width: 200px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
    -ms-transform: scale(2,3); /* IE 9 */
    -webkit-transform: scale(2,3); /* Safari */
    transform: scale(2,3); /* Standard syntax */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

নিচের উদাহরণে একটি <div> ইলামেন্টকে তার মূল উচ্চতা ও প্রস্থ চেয়ে অর্ধেক আকারে উপস্থাপণ করা হলো:

Code Example

div {
    margin: 150px;
    width: 200px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
    border: 1px solid black;
    -ms-transform: scale(0.5,0.5); /* IE 9 */
    -webkit-transform: scale(0.5,0.5); /* Safari */
    transform: scale(0.5,0.5); /* Standard syntax */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


skewX() Method

কোনো ইলামেন্টকে আনুভূমিক অক্ষ বরাবর সংকোচন বা প্রসারণ করার জন্য skewX() method ব্যবহৃত হয়।

নিচের উদাহরণে একটি <div> ইলামেন্টকে X অক্ষ বরাবর ২০ ডিগ্রীতে সংকোচন করা হলো:

Code Example

div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

div#myDiv {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg); /* Standard syntax */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


skewY() Method

কোনো ইলামেন্টকে উল্লম্বিক অক্ষ বরাবর সংকোচন বা প্রসারণ করার জন্য skewY() method ব্যবহৃত হয়।

নিচের উদাহরণে একটি <div> ইলামেন্টকে Y অক্ষ বরাবর ২০ ডিগ্রীতে সংকোচন করা হলো:

Code Example

div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

div#myDiv {
    -ms-transform: skewY(20deg); /* IE 9 */
    -webkit-transform: skewY(20deg); /* Safari */
    transform: skewY(20deg); /* Standard syntax */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


skew() Method

কোনো ইলামেন্টকে আনুভূমিক ও উল্লম্বিক অক্ষ বরাবর সংকোচন বা প্রসারণ করার জন্য skew() method ব্যবহৃত হয়।

নিচের উদাহরণে একটি <div> ইলামেন্টকে X অক্ষ বরাবর ২০ ডিগ্রীতে এবং Y অক্ষ বরাবর 10 ডিগ্রীতে সংকোচন করা হলো:

Code Example

div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

div#myDiv {
    -ms-transform: skew(20deg,10deg); /* IE 9 */
    -webkit-transform: skew(20deg,10deg); /* Safari */
    transform: skew(20deg,10deg); /* Standard syntax */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

যদি দ্বিতীয় প্যারামিটারের মান না দেওয়া হয়, তবে সেক্ষেত্রে Y এর মান ০ ধরা হয়:

Code Example

div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

div#myDiv {
    -ms-transform: skew(20deg); /* IE 9 */
    -webkit-transform: skew(20deg); /* Safari */
    transform: skew(20deg); /* Standard syntax */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


matrix() Method

Rotate
সব দ্বিমাত্রিক ট্রান্সফরমেশন মেথডে একসাথে matrix() method দিয়ে উপস্থাপণ করা যায়। অর্থাৎ, এটি হচ্ছে বাকিসব দ্বিমাত্রিক ট্রান্সফরমেশন মেথডের সমন্বিত রূপ।

matrix() method এ mathematic function সহ ছয়টি parameter দেওয়া হয়, যা দিয়ে কোনো ইলামেন্টকে rotate, scale, move (translate), এবং skew করা যায়।

ব্যবহার পদ্ধতিটি এরকম: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Code Example

div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

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

div#myDiv2 {
    -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */
    -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Safari */
    transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


নিজে নিজে চর্চা করুন!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »


CSS3 Transform Property সমূহ

নিচে সব দ্বিমাত্রিক ট্রান্সফর্ম প্রপার্টিসমূহ উল্লেখ্য করা হলো:

প্রপার্টি বর্ণনা
transform কোনো ইলামেন্ট দ্বিমাত্রিক ও ত্রিমাত্রিক ট্রান্সফর্ম প্রয়োগ করার জন্য ব্যবহৃত হয়।
transform-origin কোনো ইলামেন্টের অবস্থান নির্ধারণ করার জন্য ব্যবহৃত হয়।

2D Transform Method সমূহ

ফাংশন বর্ণনা
matrix(n,n,n,n,n,n) 2D transformation বর্ণনা করার জন্য ব্যবহৃত হয়।
translate(x,y) X- ও Y-axis এর সাপেক্ষে কোনো ইলামেন্টের অবস্থান পরিবর্তন করার জন্য ব্যবহৃত হয়।
translateX(n) X-axis বরাবর কোনো ইলামেন্টের অবস্থান পরিবর্তন করার জন্য ব্যবহৃত হয়।
translateY(n) Y-axis বরাবর কোনো ইলামেন্টের অবস্থান পরিবর্তন করার জন্য ব্যবহৃত হয়।
scale(x,y) কোনো ইলামেন্টর উচ্চতা ও প্রস্থ বরাবর সংকোচন বা প্রসারণ বর্ণনা করার জন্য ব্যবহৃত হয়।
scaleX(n) আনুভূমিক সংকোচন বা প্রসারণ বর্ণনা করার জন্য ব্যবহৃত হয়।
scaleY(n) উল্লম্বিক সংকোচন বা প্রসারণ বর্ণনা করার জন্য ব্যবহৃত হয়।
rotate(angle) কোনো ইলামেন্টকে ঘড়ির কাঁটার দিকে বা বিপরীত দিকে ঘুরানোর জন্য ব্যবহৃত হয়।
skew(x-angle,y-angle) কোনো ইলামেন্টর উচ্চতা ও প্রস্থ বরাবর সংকোচন বর্ণনা করার জন্য ব্যবহৃত হয়।
skewX(angle) আনুভূমিক সংকোচন বর্ণনা করার জন্য ব্যবহৃত হয়।
skewY(angle) উল্লম্বিক সংকোচন বর্ণনা করার জন্য ব্যবহৃত হয়।