با بهره بری و استفاده از تابع 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 چرخش ۴۵ درجه حول محور */

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

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

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

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

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