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

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

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

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

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

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

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

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

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

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

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

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