با استفاده از تابع rotateY که برای ویژگی transform تعیین می شود می توانید یک عنصر را در فضای سه بعدی دور محور Y بچرخانید.
این تابع یک زاویه می گیرد که میزان چرخش دور محور Y را نشان می دهد. زاویه مثبت باعث می شود که عنصر در جهت عقربه های ساعت دور این محور بچرخد. همچنین مقدار منفی برای زاویه باعث چرخش عنصر در جهت خلاف عقربه های ساعت می شود.
این زاویه می تواند از نوع درجه (deg) یا رادیان (rad) باشد.
عملکرد این تابع برابر است با:
transform: rotate3d(0, 1, 0, <angle>);
()rotate3d تابعی برای چرخاندن عناصر در فضای سه بعدی می باشد.
مثال های زیر استفاده صحیح از این تابع هستند:
transform: rotateY(30deg);
transform: rotateY(-135deg);
transform: rotateY(90deg);
در تصویر زیر دو نمونه از استفاده این تابع نمایش داده شده است:
با تغییر مقدار تابع در دموی زیر به درک بهتر موضوع کمک کنید. توجه داشته باشید که چرخش در حالت hover صورت می گیرد و همینطور از transition برای واضح شدن حرکت استفاده شده است:
See the Pen rotateY() by Mojtaba Seyedi (@seyedi) on CodePen.
سلام خسته نباشید ممنون از سایت خوبتون واقعا عالیه
یه سوال درباره rotate : من میخوام rotate از گوشه عنصر بشه نه از وسطش چجوری میتونم همچین کاری کنم؟
سلام. ممنون از شما
این مطلب رو لطفا بخونید: css-tricks.ir/css_reference…
سلام ممنون از آموزش خوبتون.من میخواهم بعنوان navbar دومی 3D که مربع می چرخد را استفاده کنم هر کاری کردم نتونستم فونت را به وسط بیارم !
بعنوان مثال می خواهم <> داخلش بنویسم و بعنوان یکی از کلید های منو navabr عمل کنه!