ফাংশন rotate
rotate() ফাংশনটি একটি এলিমেন্টকে
নির্দিষ্ট কোণে ঘোরানোর জন্য নির্ধারণ করে।
এটি transform বৈশিষ্ট্যের সাথে
একত্রে ব্যবহার করা হয়। বৈশিষ্ট্যের মান হল
যেকোন কোণের এককে কোণ।
ধনাত্মক মান ঘড়ির কাঁটার দিকে ঘোরায়,
ঋণাত্মক মান - ঘড়ির কাঁটার বিপরীত দিকে।
ঘূর্ণন transform-origin
দ্বারা নির্ধারিত বিন্দুর চারদিকে সম্পাদিত হয়।
সিনট্যাক্স
সিলেক্টর {
transform: rotate(কোণ);
}
উদাহরণ
এই উদাহরণে ব্লকটি ঘড়ির কাঁটার দিকে 30
ডিগ্রী করে ঘোরানো হয়েছে:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
উদাহরণ
এই উদাহরণে ব্লকটি ঘড়ির কাঁটার বিপরীত দিকে 30
ডিগ্রী করে ঘোরানো হয়েছে:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
উদাহরণ
এই উদাহরণে, হোভার করলে ব্লকটি 1
বার ঘুরবে, কারণ ঘূর্ণনের মান
1turn এ নির্ধারিত (একই প্রভাব পাওয়া যাবে,
যদি ঘূর্ণনের কোণ 360deg এ নির্ধারণ করা হয়)।
ঘূর্ণন মসৃণ করার জন্য
transition বৈশিষ্ট্য
যোগ করা হয়েছে:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate(1turn);
}
:
