()rotate3d

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

برای این تابع باید چهار مقدار تعیین شود که سه مقدار اول برداری را در فضای سه بعدی می سازند که عنصر به اندازه زاویه ای که به عنوان مقدار چهارم به این تابع داده می شود, دور این بردار می چرخد.

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

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

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

مثال زیر را در نظر بگیرید:

 


transform: rotate3d(1, 1, 1, 50deg);

 

نتیجه بصورت زیر خواهد بود:

 
مثال چرخش سه بعدی عنصر
 

 


transform: rotate3d(1, 1, 2, 45deg);

transform: rotate3d(2, 1, 3, 33deg);

transform: rotate3d(1, 0, 0, 45deg); /*  x چرخش 45 درجه حول محور */

transform: rotate3d(0, 1, 0, -45deg); /* y چرخش 45 درجه حول محور */

transform: rotate3d(0, 0, 1, 10rad); /* z چرخش 10 رادیان حول محور  */

transform: rotate3d(0, 0, 0, 50deg); /* از آنجایی که برداردی وجود ندارد چرخشی اعملا نخواهد شد. */

 

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

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

 

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

سوالت رو توی پنل بحث و گفتگو مطرح کن.

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

  1. سلام
    ممنون از مطالب مفید شما
    transform: rotate3d(1, 1, 1, 50deg);
    می خواستم بدونم اگر عددی غیر از 1 بنویسم ، چه تاثیری میتونه داشته باشه ؟

      1. سلام. سوالتون رو متوجه نمی شم. این پست دقیقا توضیح سوال شماست. و اون دمو که ساخته شده می تونه بهتون کمک کنه.

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