Transform property- rotate, skew, scale, translate এর ব্যবহার

Post No:24

আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন আজকে আমরা Transform property- rotate, skew, scale, translate এর ব্যবহার সম্পর্কে জানবো।

আমার আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:
hashnode.com/@Labib

এক নজরে দেখে নেই, আজ আমরা কি কি শিখবো :

1. CSS Transform Property-

   1. Transform Translate

   2. Transform Rotate

   3. Transform Skew

   4. Transform Scale…

2. CSS Transform Property- translate এর ব্যবহার :

Transform: translate (30px, 30px) এই property ব্যবহার করে আমরা উপরে নিচে, ডানে বামে সরাতে পারি |

ইহা শুধু X অক্ষ বরাবর সরানো যায় Transform: translateX (30px),

আবার Y অক্ষ বরাবর সরানো যায় Transform: translateX (30px)

এই লেখা পড়ে, না বুঝতে পারলে নিচের ভিডিওটি দেখতে পারেন

লিংক

1. CSS Transform Property- Rotate এর ব্যবহার:

Transform : rotate ব্যবহার করে আমরা একটি ইমেজ বা divকে ঘুরাতে পারি | ইহা deg আকারে কাজ করে| ইহাকে শুধু X অক্ষ বরাবর ঘোরাতে পারবো আবার চাইলে শুধু Y অক্ষ বরাবরও ঘোরাতে পারবো |

নিচে কোড গুলো শেয়ার করা হলো :

প্রথম ধাপ : html ফাইল এ

<div class="labib">
  <div class="child1">
    <p>This is Normal Div</p>
  </div>
  <div class="child2">
    <p>This div element is rotated 320 deg.</p>
  </div>
</div>

দ্বিতীয় ধাপঃ css ফাইল এ

.labib{
width: 800px;
border: 3px solid orangered;
margin: 50px auto;
color: #fff;
}

এখানে labibনামে মেইন div নেয়া হয়েছে এবং width: 800px দেয়া হয়েছে |

margin: 50px auto; এর ব্যবহার -

ইহা ব্যবহার করাতে main div এর উপরে নিচে 50 পিক্সেল জায়গা বৃদ্ধি পেয়েছে আর ডান বাম পাশ থেকে মাঝে অবস্থান করেছে |

border: 3px solid orangered; এর ব্যবহার -

ইহা ব্যাবহার করাতে চারপাশে দাগ তৈরি হয়েছে |

.child1{
width: 200px;
height: 200px;
background-color: black;
margin: 50px auto;
}

এখানে width height ব্যবহার করে child1 div কে একটি জায়গা নির্দিষ্ট করে দেয়া হয়েছে এবং ব্যাকগ্রাউন্ড কালার দেয়া হয়েছে যাতে আমরা বুঝতে পারি child1 div দেখতে কেমন হয়েছে |

.child2{
width: 200px;
height: 200px;
background-color: black;
margin: 50px auto;
transform: rotate(320deg);
}

transform: rotate(320deg); ব্যবহার করে আমরা div বা image বাঁকাতে পারি | এছাড়াও rotate ব্যবহার করে খুব সুন্দর হোভার ইফেক্ট তৈরি করতে পারি | হোভার ইফেক্ট দেখতে ভিডিওটি ক্লিক করুন -

Rotate ব্যবহার না করলে আমরা এমন সুন্দর হবার

নিচে কোড গুলো শেয়ার করা হলো :

প্রথম ধাপ : html ফাইল এ

<div class="labib">
  <div class="child1">
    <img src="https://i.ibb.co/3kGkQsB/Untitled-design-1.jpg" alt="labib">
  </div>
</div>

দ্বিতীয় ধাপঃ css ফাইল এ

.labib{
width: 500px;
border: 3px solid orangered;
margin: 200px auto;
color: #fff;
overflow: hidden;
}
.child1{
width: 500px;
margin: auto;
transition: 2s;
}
.child1 img{
max-width: 100%;
}
.child1:hover{
transform: rotate(360deg);
}

3.CSS Transform Property- Skew এর ব্যবহার:

https://prnt.sc/mpQsdgmUhpkb

নিচে কোড গুলো শেয়ার করা হলো :

প্রথম ধাপ : html ফাইল এ

<div class="labib">
  <div class="child1">
    <img src="https://i.ibb.co/3kGkQsB/Untitled-design-1.jpg" alt="labib">
  </div>
  <div class="child2">
    <img src="https://i.ibb.co/3kGkQsB/Untitled-design-1.jpg" alt="labib">
  </div>
</div>

দ্বিতীয় ধাপঃ css ফাইল এ

.labib{
width: 800px;
border: 3px solid orangered;
margin: 50px auto;
color: #fff;
}
.child1{
width: 300px;
margin: 50px auto;
}
.child2{
width: 300px;
margin: 50px auto;
transform: skew(320deg);
}
.child1 img, .child2 img{
max-width: 100%;

}

এই কোডগুলো ব্যবহার করে আমরা একটি ইমেজকে কোনাকুনি বাঁকাতে পারি | ইহার ডিগ্রি আকারে কাজ করে | ইহাকে থাকে শুধু x-অক্ষ বরাবর বাঁকাতে পারি আবার চাইলে Y- অক্ষ বরাবর বাঁকাতে পারি যেমন - transform: skewX(220deg) , transform: skewY(120deg);

4.CSS Transform Property- scale এর ব্যবহার:

Transform: scale(2) এই property ব্যবহার করে আমরা উপরে নিচে, ডানে বামে সমান ভাবে বৃদ্ধি পায় |

ইহাকে শুধু X অক্ষ বরাবর বৃদ্ধি করা যায় Transform: skewX (2),

আবার, ইহাকে শুধু Y অক্ষ বরাবর বৃদ্ধি করা যায় Transform: translateY (2)

নিচে উদাহরন দেয়া হলো :

নিচে কোড গুলো শেয়ার করা হলো :

প্রথম ধাপ : html ফাইল এ

<div class="labib">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

দ্বিতীয় ধাপঃ css ফাইল এ

.labib{
width: 800px;
border: 3px solid orangered;
margin: 50px auto;
color: #fff;
}
.child1{
width: 100px;
height: 100px;
margin: 50px auto;
background-color: orangered;
}

একটি div কে নর্মাল অবস্থায় কেমন দেখায় সেটা ডিজাইন করা হয়েছে | নিচে আমরা দেখব transform: scale(2); ব্যবহার করলে ডিজাইন কেমন আসে |

.child2{
width: 100px;
height: 100px;
margin: 90px auto;
background-color: orangered;
transform: scale(2);
}

transform: scale(2); ইহা হবার ইফেক্টে ব্যবহার করতে পারি | সেক্ষেত্রে

অ্যানিমেশন আরো সুন্দরভাবে ফুটে উঠবে |