ফাংশন rotateZ
ফাংশন rotateZ ত্রিমাত্রিক স্থানে Z অক্ষের সাপেক্ষে
ঘূর্ণন নির্দিষ্ট করে। এটি transform
প্রপার্টির সাথে একত্রে ব্যবহার করা হয়।
প্রপার্টির মান হিসাবে যেকোনো কোণের একক-এ কোণ দেওয়া যায়।
ধনাত্মক মান ঘড়ির কাঁটার দিকে ঘোরায়,
ঋণাত্মক মান - ঘড়ির কাঁটার বিপরীতে ঘোরায়।
ঘূর্ণন সম্পাদিত হয় সেই বিন্দুকে কেন্দ্র করে, যা
transform-origin
প্রপার্টি দ্বারা নির্দিষ্ট করা থাকে।
সিনট্যাক্স
cssসিলেক্টর {
transform: rotateZ(কোণ);
}
উদাহরণ
এই উদাহরণে, ব্লকটি হভার করলে Z অক্ষের সাপেক্ষে
180 ডিগ্রি ঘুরবে। ঘূর্ণনের মসৃণতার জন্য
transition প্রপার্টি যোগ করা হয়েছে:
html<div id="elem">lorem ipsum</div>css#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotateZ(180deg);
}
Результат:
উদাহরণ
transform-origin প্রপার্টি ব্যবহার করে
ঘূর্ণনের অক্ষ পরিবর্তন করা যাক:
html<div id="elem">lorem ipsum</div>css#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
transform-origin: center bottom;
}
#elem:hover {
transform: rotateZ(180deg);
}
Результат: