CSS rotate() ফাংশন একটি এলিমেন্টকে নির্দিষ্ট ডিগ্রি দিয়ে ঘুরিয়ে দেয়। আপনি ধনাত্মক ডিগ্রি ব্যবহার করে ঘড়ির সুই দিকsoever এলিমেন্ট ঘুরিয়ে দিতে পারেন। অথবা, ঋণাত্মক ডিগ্রি ব্যবহার করে ঘড়ির সুই বিপরীত দিকsoever ঘুরিয়ে দিতে পারেন।
আজ আমরা শিখব CSS দিয়ে এলিমেন্ট কীভাবে ঘুরিয়ে দিতে হয়। আমরা কেন এলিমেন্ট ঘুরিয়ে দিব? এলিমেন্ট ঘুরিয়ে দেয়া আপনার ওয়েব পেজকে আরও ইন্টারেক্টিভ করে তোলে। সঠিকভাবে ব্যবহার করলে একটি ঘুরন্ত এলিমেন্ট আপনার সাইটের সৌন্দর্য বাড়াবে।
এই আর্টিকেল পড়ার সময় সাথে থাকা রিপো রেফার করুন, যাতে কনসেপ্টগুলো কাজে লাগত দেখতে পারেন। এলিমেন্ট কীভাবে ঘুরিয়ে দিতে হয় জানা আপনার CSS টুলবক্সের একটি মূল্যবান যোগ হবে।
CSS rotate()
CSS rotate() ফাংশন আপনাকে একটি এলিমেন্টকে ২D অক্ষের ওপর ঘুরিয়ে দিতে দেয়। rotate() ফাংশন এক আর্গুমেন্ট নেয়: আপনি আপনার ওয়েব এলিমেন্টকে কোন কোণে ঘুরিয়ে দিতে চান। আপনি একটি এলিমেন্টকে ঘড়ির সুই বা ঘড়ির সুই বিপরীত দিকsoever ঘুরিয়ে দিতে পারেন।
চলুন rotate() ফাংশনের সিনট্যাক্স দেখি:
transform: rotate(angle);"angle" মানটি এলিমেন্টটি কত ডিগ্রি ঘুরবে তা নির্দেশ করে। আপনি ধনাত্মক ডিগ্রি মান (যেমন ৪৫) ব্যবহার করে ঘড়ির সুই দিকsoever ঘুরিয়ে দিতে পারেন। অথবা, ঋণাত্মক ডিগ্রি মান (যেমন -৩৯) ব্যবহার করে বিপরীত দিকsoever ঘুরিয়ে দিতে পারেন।
rotate() ফাংশন যেকোনো HTML এলিমেন্টে প্রয়োগ করা যায়। উদাহরণস্বরূপ, আপনি একটি প্যারাগ্রাফ টেক্সট ঘুরিয়ে দিতে পারেন। অথবা একটি ইমেজ ঘুরিয়ে দিতে পারেন।
HTML রোটেট পেজ রেন্ডার होते সাথে সাথে দেখায় তাই কোনো দৃশ্যমান রোটেশন দেখা যায় না। রোটেশন কাজে লাগত দেখতে আপনাকে CSS ট্রানজিশন ব্যবহার করতে হবে। ট্রানজিশন একটি এলিমেন্টের অবস্থা পরিবর্তন করে যখন কোনো অ্যাকশন হয়, যেমন যখন কার্সর কোনো এলিমেন্টের ওপর হোভার করে।
rotate() CSS উদাহরণ
চলুন একটি HTML পেজ তৈরি করি যেটিতে একটি ঘুরন্ত বক্স রাখব। একটি বক্স div হিসেবে যোগ করি এবং এটিকে একটি ক্লাস দেই (নাম দিই "rotate")।
<div class="rotate"></div>এখন এটিতে কিছু স্টাইলিং যোগ করি:
div.rotate {
width: 50px;
height: 50px;
background-color: chocolate;
}রিফ্রেশ করুন। কুল, আমাদের একটি রঙিন বক্স পেলাম। এই রঙিন বক্স দিয়ে আমাদের rotate() ফাংশন ব্যবহার শুরু করার সব কিছু পেলাম।
আমাদের বক্স ঘুরিয়ে দিতে হলে আগে transform প্রপার্টি সম্পর্কে জানতে হবে।
CSS transform ফাংশন নামানুসারে এলিমেন্টগুলো ট্রান্সফর্ম বা রূপান্তরিত করে। এতে প্রয়োগ করা যেতে পারে এমন ফাংশনগুলোর মধ্যে একটি হলো rotate()। transform প্রপার্টি আরও অনেক ফাংশন নিতে পারে এবং transform দিয়ে অনেক কাজ করা যায়। রোটেট সেগুলোর শুধু একটি।
rotate ফাংশন একটি এলিমেন্টকে সরিয়ে দেয়। এটিতে এক আর্গুমেন্ট থাকে: আমরা এলিমেন্টকে কত ডিগ্রি স্কিউ বা বাঁকাতে চাই। চলুন ৩৫ ডিগ্রি ধনাত্মক রোটেশন প্রয়োগ করি:
div.rotate {
width: 50px;
height: 50px;
background-color: chocolate;
transform: rotate(35deg);
}আমরা আমাদের বক্স ঘুরিয়ে দিয়েছি! নিজের পিঠে একটা ধাপ দিন।
CSS Transform rotate() ফাংশন কখন ব্যবহার করবেন
Rotate ফ্যান্সি UI আইডিয়া বা ইমেজ ঘুরিয়ে দিতে সাহায্য করে। উদাহরণস্বরূপ, আপনি একটি ইমেজ ১৮০ ডিগ্রি ঘুরিয়ে দিতে পারেন। যদি আপনি সেটা কোথাও অন্য জায়গায় ব্যবহার করতে চান তবে সেভ করে নিন এবং যথাযথভাবে ব্যবহার করুন।
আপনি টেক্সটও ঘুরিয়ে দিতে পারেন। ধরুন, আপনি একটি ম্যাগাজিনের নকল একটি লেআউট তৈরি করছেন, আপনি আসলে টেক্সট ঘুরিয়ে দিয়ে টেক্সট এলিমেন্টগুলোর ওপর জোর দিতে পারেন।
এটি rotate() দিয়ে আপনি যা যা করতে পারেন তার সব নয়। রোটেট ফাংশন আমাদের কিছু খুব কুল অ্যানিমেশন করতে দেয়!
চলুন আমাদের div-এ CSS :hover সিলেক্টর ব্যবহার করে আসলে একটি সুন্দর রোটেশন ইফেক্ট প্রয়োগ করি:
.rotate:hover {
transform: rotate(35deg);
background-color: deeppink;
}এটা কি কুল নয়? 😊
আমাদের বক্স মাউস দিয়ে হোবার করলে ঘুরে যায়। আমরা background-color CSS প্রপার্টি ব্যবহার করে হোবার করার সময় বক্সের রং পরিবর্তন করেছি।
উপসংহার
CSS rotate() ফাংশন একটি ওয়েব এলিমেন্টকে একটি কোণে দেখানোর মত করে। এই ফাংশন এক আর্গুমেন্ট নেয়: এলিমেন্টটি কত ডিগ্রি ঘুরবে। আপনি ধনাত্মক বা ঋণাত্মক ডিগ্রি মান নির্দিষ্ট করতে পারেন।
এলিমেন্ট ঘুরিয়ে দেয়া আপনার ওয়েব পেজগুলোক আরও সৌন্দর্যপূর্ণ করে তোলে। উদাহরণস্বরূপ, আপনি ব্যবহারকারী কার্সর রাখলে একটি বক্সে রোটেট প্রয়োগ করতে পারেন। অথবা আপনি ব্যবহারকারী মাউস হোবার করলে একটি লিংক ঘুরিয়ে দিতে পারেন। আপনি কীভাবে এই দক্ষতা ব্যবহার করবেন সেটি আপনার ওপর নির্ভর!
CSS সম্পর্কে আরও জানতে আগ্রহী? এক্সপার্ট পরামর্শ এবং শীর্ষ শিক্ষামূলক সংস্থান গাইডেন্সের জন্য আমাদের সম্পূর্ণ How to Learn CSS গাইড দেখুন।
