با استفاده از تابع 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.
سلام خداقوت. ممنون بابت مطالب خوبتون.
فکر میکنم زاویه مثبت در جهت خلاف عقربه های ساعت باشه. یه بازبینی بکنید ممنون
سلام، بازبینی انجام شد، ولی زاویه مثبت هنوز در جهت عقربه های ساعت هستش.
ممنونم
سلام خسته نباشید
میشه یه توضیح کوچیکی درباره این کارتی که درست کردین بدین؟