CSS দিয়ে ঘূর্ণায়মান উপাদান

CSS rotate() ফাংশন একটি উপাদানকে নির্দিষ্ট সংখ্যক ডিগ্রী দ্বারা skews করে। আপনি একটি ইতিবাচক সংখ্যক ডিগ্রি ব্যবহার করে একটি উপাদান ঘড়ির কাঁটার দিকে ঘোরাতে পারেন। অথবা, আপনি একটি ঋণাত্মক সংখ্যা ব্যবহার করে ঘড়ির কাঁটার বিপরীতে একটি উপাদান ঘোরাতে পারেন৷৷

আজ আমরা শিখব কিভাবে CSS দিয়ে এলিমেন্ট ঘোরানো যায়। কেন আমরা একটি উপাদান ঘোরানো উচিত? ঘূর্ণায়মান উপাদান আপনার ওয়েব পৃষ্ঠাকে আরও ইন্টারেক্টিভ করে তোলে। সঠিকভাবে ব্যবহার করা হলে, একটি ঘূর্ণায়মান উপাদান আপনার সাইটের নান্দনিকতা যোগ করবে।

এই নিবন্ধটি পড়ার সময়, অনুগ্রহ করে সহগামী রেপোটি পড়ুন, যাতে আপনি ধারণাগুলি কার্যকরভাবে দেখতে পারেন। কিভাবে একটি উপাদান ঘোরাতে হয় তা জানা আপনার CSS টুলবক্সে একটি মূল্যবান সংযোজন হবে।

CSS রোটেট()

CSS rotate() ফাংশন আপনাকে 2D অক্ষে একটি উপাদান ঘোরাতে দেয়। rotate() ফাংশন একটি আর্গুমেন্ট গ্রহণ করে:যে কোণে আপনি আপনার ওয়েব উপাদান ঘোরাতে চান। আপনি একটি উপাদান ঘড়ির কাঁটার দিকে বা ঘড়ির কাঁটার বিপরীত দিকে ঘোরাতে পারেন৷

rotate() ফাংশনের জন্য সিনট্যাক্স দেখে নেওয়া যাক:

transform: rotate(angle);

মান "কোণ" উপাদানটি ঘোরানো উচিত ডিগ্রী সংখ্যা প্রতিনিধিত্ব করে. আপনি একটি ঘূর্ণন নির্দিষ্ট করতে পারেন যা ঘড়ির কাঁটার দিকে একটি ইতিবাচক ডিগ্রি নম্বর ব্যবহার করে (যেমন 45)। অথবা, আপনি একটি নেতিবাচক ডিগ্রি মান ব্যবহার করে বিপরীত দিকে ঘোরাতে পারেন (যেমন -39)।

rotate() ফাংশন যেকোনো HTML এলিমেন্টে প্রযোজ্য হতে পারে। উদাহরণস্বরূপ, আপনি পাঠ্যের একটি অনুচ্ছেদ ঘোরাতে পারেন। অথবা আপনি একটি ছবি ঘোরাতে পারেন।

আপনি পৃষ্ঠাটি রেন্ডার করার সাথে সাথে একটি HTML ঘূর্ণন প্রদর্শিত হবে যাতে কোনও দৃশ্যমান ঘোরানো হয় না। ক্রিয়াশীল ঘূর্ণন দেখতে, আপনার একটি CSS রূপান্তর ব্যবহার করা উচিত। ট্রানজিশনগুলি একটি উপাদানের অবস্থা পরিবর্তন করে যখন একটি পদক্ষেপ নেওয়া হয়, যেমন যখন একটি কার্সার একটি উপাদানের উপর ঘোরে।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

রোটেট() CSS উদাহরণ

আসুন এগিয়ে যাই এবং আমাদের এইচটিএমএল পৃষ্ঠা তৈরি করি যার উপর একটি ঘূর্ণায়মান বাক্স রাখা যায়। আসুন একটি ডিভ হিসাবে একটি বক্স যোগ করি এবং এটিকে একটি ক্লাস দিন (আসুন এটিকে "ঘোরান" নাম দেওয়া যাক)।

<div class="rotate"></div>

এখন এর সাথে কিছু স্টাইলিং যোগ করা যাক:

div.rotate {
    width: 50px;
    height: 50px;
    background-color: chocolate;
}

রিফ্রেশ কুল, আমরা একটি রঙিন বাক্স আছে. এই রঙ্গিন বক্সের সাথে, আমাদের যা কিছু আছে তা রোটেট() ফাংশন ব্যবহার শুরু করার জন্য আছে।

আমাদের বাক্সটি ঘোরানোর জন্য, আমাদের প্রথমে রূপান্তর সম্পত্তি নিয়ে আলোচনা করতে হবে।

CSS ট্রান্সফর্ম ফাংশন নামটি বোঝায়, উপাদানগুলিকে রূপান্তর করে। একটি ফাংশন যা আমরা এটিতে প্রয়োগ করতে পারি, তা হল rotate() . ট্রান্সফর্ম প্রপার্টি অন্যান্য অনেক ফাংশন নিতে পারে এবং আমরা ট্রান্সফর্মের সাথে অনেক কিছু করতে পারি। ঘোরান তাদের মধ্যে একটি মাত্র৷

ঘূর্ণন ফাংশন একটি উপাদান সরানো. এটি একটি যুক্তি লাগে:ডিগ্রীর সংখ্যা আমরা উপাদান তির্যক করতে চাই. আসুন এগিয়ে যাই এবং একটি 35-ডিগ্রী ইতিবাচক ঘূর্ণন প্রয়োগ করি:

div.rotate {
    width: 50px;
    height: 50px;
    background-color: chocolate;
    transform: rotate(35deg); 
}

আমরা আমাদের বাক্স ঘোরানো! পিছনে নিজেকে আলতো চাপুন.

CSS Transform rotate() ফাংশন কখন ব্যবহার করবেন

ঘোরান অভিনব UI ধারণা বা ঘূর্ণন চিত্রের জন্য অনুমতি দেয়। উদাহরণস্বরূপ, আপনি একটি ছবি 180 ডিগ্রি ঘোরাতে পারেন। আপনার যদি অন্য কোথাও সেই ঘোরানো চিত্রের প্রয়োজন হয় তবে এটি সংরক্ষণ করুন এবং সেই অনুযায়ী এটি ব্যবহার করুন।

আরেকটি জিনিস যা আপনি ঘোরাতে পারেন তা হল পাঠ্য। ধরা যাক আপনি একটি লেআউট তৈরি করছেন যা একটি ম্যাগাজিনের অনুকরণ করে, আপনি আসলে পাঠ্য উপাদানগুলিতে জোর যোগ করতে পাঠ্যটিকে ঘোরাতে পারেন।

এবং আপনি rotate() দিয়ে করতে পারবেন না . রোটেট ফাংশন আমাদের কিছু সত্যিই দুর্দান্ত অ্যানিমেশন করতে দেয় !

চলুন এগিয়ে যাই এবং একটি সুন্দর ঘূর্ণন প্রভাব প্রয়োগ করতে আমাদের ডিভিতে CSS :হোভার সিলেক্টর ব্যবহার করি:

.rotate:hover {
    transform: rotate(35deg); 
    background-color: deeppink;
}

এই শান্ত না? 😎

আমাদের বাক্সটি ঘোরে যখন আমরা এটির উপর একটি মাউস দিয়ে ঘুরি। আমরা ব্যাকগ্রাউন্ড-কালার সিএসএস প্রপার্টি ব্যবহার করি আমাদের বক্সের রঙ পরিবর্তন করার জন্য যখন আমরা এটির উপর হভার করি।

উপসংহার

CSS rotate() ফাংশন একটি ওয়েব উপাদানকে একটি কোণে উপস্থিত করে। এই ফাংশনটি একটি আর্গুমেন্ট গ্রহণ করে:উপাদানটি কত ডিগ্রি ঘোরানো উচিত। আপনি একটি ইতিবাচক বা নেতিবাচক ডিগ্রি মান নির্দিষ্ট করতে পারেন৷

ঘূর্ণায়মান উপাদানগুলি আপনাকে আপনার ওয়েব পৃষ্ঠাগুলিকে আরও নান্দনিকভাবে আনন্দদায়ক করতে দেয়৷ উদাহরণস্বরূপ, আপনি একটি বাক্সে একটি ঘূর্ণন প্রয়োগ করতে পারেন যখন ব্যবহারকারী তাদের কার্সার দিয়ে এটির উপর ঘোরায়। অথবা আপনি একটি লিঙ্ক ঘোরানোর সিদ্ধান্ত নিতে পারেন যখন একজন ব্যবহারকারী তাদের মাউস দিয়ে এটির উপর ঘোরায়। আপনি কিভাবে এই দক্ষতা ব্যবহার করবেন তা আপনার ব্যাপার!

আপনি কি CSS সম্পর্কে আরও জানতে আগ্রহী? শীর্ষ শিক্ষার সংস্থানগুলিতে বিশেষজ্ঞের পরামর্শ এবং দিকনির্দেশনার জন্য আমাদের সম্পূর্ণ কীভাবে সিএসএস শিখবেন নির্দেশিকা দেখুন।