()rotate

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

این چرخش بر اساس زاویه ای که برای تابع rotate تعیین می شود صورت می گیرد. و گردش دور مبدایی که بوسیله ویژگی transform-origin تنظیم شده است, انجام خواهد شد.

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

مقادیر این تابع می توانند از نوع درجه (deg), چرخش (turn) یا رادیان (rad) باشند.


.element {    
  transform: rotate(45deg); /* چهل و پنج درجه در جهت عقربه های ساعت */
  transform: rotate(2.5turn); /* دو چرخش کامل (360) و یک نیم چرخش */
  transform: rotate(-3turn); /* سه دور کامل در خلاف عقربه های ساعت */
  transform: rotate(1.57rad); /* معادل 90 درجه چرخش  */
}

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

چرخش عناصر در css

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

 

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

 

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

سوالت رو توی پنل بحث و گفتگو مطرح کن.

2 دیدگاه برای “()rotate

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *