ওয়েব ডিজাইনের দুনিয়ায় CSS Transition ও Transform একটি ওয়েবসাইটের UI (User Interface) উন্নত করার গুরুত্বপূর্ণ হাতিয়ার। এগুলোর সাহায্যে ওয়েবপেজে বিভিন্ন অ্যানিমেশন ও গতিশীলতা যোগ করা যায় যা ইউজারদের জন্য দৃষ্টিনন্দন অভিজ্ঞতা তৈরি করে।

আজকের এই ব্লগে আমরা একটি ছোট HTML ও CSS প্রজেক্টের মাধ্যমে দেখাবো কীভাবে transition এবং transform ব্যবহার করে একটি বক্সকে হোভার করার সময় সেটিকে সরিয়ে নেওয়া যায়।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transition</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box"></div>
</body>
</html>

এই HTML ফাইলটি খুবই সাধারণ একটি স্ট্রাকচার অনুসরণ করেছে। এখানে রয়েছে:

<!DOCTYPE html>: ব্রাউজারকে জানায় এটি একটি HTML5 ডকুমেন্ট।
<head>: যেখানে শিরোনাম ও CSS ফাইল যুক্ত করা হয়েছে।
<link rel="stylesheet" href="style.css">: বাহ্যিক CSS ফাইল যুক্ত করা হয়েছে যেখানে স্টাইলিং করা হবে।
<body> অংশে রয়েছে শুধুমাত্র একটি div যার ক্লাস নাম box।

* {
    margin: 0;
    padding: 0;
}

উপরের অংশে একটি ইউনিভার্সাল সিলেক্টর ব্যবহার করে সব HTML উপাদানের margin ও padding 0 করে দেওয়া হয়েছে, যাতে ডিফল্ট স্পেস বাদ দেওয়া হয়।

.box {
    width: 300px;
    height: 200px;
    margin: 150px auto;
    position: relative;
    overflow: hidden;
    background-color: aqua;
    transition: 0.7s;
}

width এবং height: বক্সের প্রস্থ ও উচ্চতা নির্ধারণ করা হয়েছে।
margin: 150px auto: উপরের দিকে 150px মার্জিন এবং অটো হরাইজন্টাল মার্জিনে করে বক্সটিকে মাঝখানে রাখা হয়েছে।
position: relative: ভবিষ্যতে যদি কোনো অভ্যন্তরীণ এলিমেন্টে absolute পজিশন ব্যবহার করা হয়, সেটা এই বক্সকে রেফারেন্স হিসেবে নেবে।
overflow: hidden: অতিরিক্ত কনটেন্ট যেন বাইরে না আসে।
background-color: aqua: ব্যাকগ্রাউন্ড রঙ অ্যাকুয়া করা হয়েছে।
transition: 0.7s: বক্সে কোনো পরিবর্তন (যেমন transform) হলে তা 0.7 সেকেন্ডে ধীরে ধীরে হবে।

.box:hover {
    transform: translate(100px, 50px);
}

🔍 ব্যাখ্যা:

যখন ইউজার মাউস পয়েন্টার বক্সের উপর রাখবে (hover করবে), তখন:
- transform: translate(100px, 50px); নির্দেশনা অনুযায়ী বক্সটি ডানদিকে 100px এবং নিচে 50px সরবে।
- যেহেতু transition যুক্ত আছে, তাই এই গতি হবে ধীরে ধীরে (0.7 সেকেন্ড সময় ধরে)।

🔁 অন্যান্য Transform এর বিকল্প

কোডে কমেন্ট আকারে আরও কিছু transform প্রপার্টি যুক্ত করা ছিল, যেমন:

/* transform: rotate(360deg); */
/* transform: scale(2.1); */
/* transform: skew(45deg); */

এই গুলো প্রয়োগ করলে বক্সের ভিন্ন ভিন্ন অ্যানিমেশন পাওয়া যাবে:

rotate(360deg): বক্সটি ৩৬০ ডিগ্রি ঘুরবে।
scale(2.1): বক্সটি ২.১ গুণ বড় হবে।
skew(45deg): বক্সটি ৪৫ ডিগ্রি কোণে হেলে যাবে।

এই প্রপার্টিগুলো আপনি translate এর জায়গায় ব্যবহার করে দেখতে পারেন।

এই ছোট্ট প্রজেক্টের মাধ্যমে আমরা দেখেছি কীভাবে CSS এর transition এবং transform প্রপার্টি ব্যবহার করে একটি সাধারণ div কে ইন্টারঅ্যাকটিভ করা যায়। এই ধরনের অ্যানিমেশন ইউজারের অভিজ্ঞতা উন্নত করে এবং ওয়েবসাইটকে আরও প্রাণবন্ত করে তোলে।

আপনি চাইলে এই ধারণা ব্যবহার করে আরও জটিল ডিজাইন ও অ্যানিমেশন তৈরি করতে পারেন, যেমন:

মেনু হোভার ইফেক্ট
কার্ড জুম ইন/আউট
স্লাইডিং এফেক্ট
বাটন ক্লিক অ্যানিমেশন

CSS Transition ও Transform শেখার জন্য এটি একটি চমৎকার হাতেখড়ি প্রজেক্ট। আপনি যদি ওয়েব ডিজাইনে নতুন হন, তাহলে আজই এটি প্র্যাকটিস করুন এবং নিজস্ব কিছু ডিজাইন তৈরি করার চেষ্টা করুন।

CSS Transition এবং Transform এর ব্যবহার

🔍 ব্যাখ্যা:

🔁 অন্যান্য Transform এর বিকল্প

Subscribe to my newsletter

Shihab

Shihab