()rotateY

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

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

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

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

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

 


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

 

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

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

 


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

 

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

 

مثال rotateY

 

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

 

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


 

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

3 دیدگاه برای “()rotateY

  1. سلام خسته نباشید ممنون از سایت خوبتون واقعا عالیه
    یه سوال درباره rotate : من میخوام rotate از گوشه عنصر بشه نه از وسطش چجوری میتونم همچین کاری کنم؟

  2. سلام ممنون از آموزش خوبتون.من میخواهم بعنوان navbar دومی 3D که مربع می چرخد را استفاده کنم هر کاری کردم نتونستم فونت را به وسط بیارم !
    بعنوان مثال می خواهم <> داخلش بنویسم و بعنوان یکی از کلید های منو navabr عمل کنه!

سوال داری؟ برو به پنل پرسش و پاسخ

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