()rotateX

با استفاده از تابع rotateX که برای ویژگی transform تعیین می شود می توانید یک عنصر را در فضای سه بعدی دور محور X بچرخانید.

این تابع یک زاویه می گیرد که میزان چرخش دور محور X را نشان می دهد. زاویه مثبت باعث می شود که عنصر در جهت عقربه های ساعت دور این محور بچرخد. همچنین مقدار منفی برای زاویه باعث چرخش عنصر در جهت خلاف عقربه های ساعت می شود.

این زاویه می تواند از نوع درجه (deg) یا رادیان (rad) باشد.

 
نحوه چرخش حول محورهای مختصات در فضای سه بعدی
 

عملکرد این تابع برابر است با:

 


transform: rotate3d(1, 0, 0, <angle>);

 

()rotate3d تابعی برای چرخاندن عناصر در فضای سه بعدی می باشد.

مثال های زیر استفاده صحیح از این تابع هستند:

 


transform: rotateX(30deg);
transform: rotateX(-135deg);
transform: rotateX(90deg);

 

در تصویر زیر دو نمونه از استفاده این تابع نمایش داده شده است:

 
استفاده از تابع rotateX
 

با تغییر مقدار تابع در دموی زیر به درک بهتر موضوع کمک کنید. توجه داشته باشید که چرخش در حالت hover صورت می گیرد و همینطور از transition برای واضح شدن حرکت استفاده شده است:

 

See the Pen rotateX() by Mojtaba Seyedi (@seyedi) on CodePen.


 

پشتیبانی مرورگر ها

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *