()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.

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