با استفاده از تابع 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 در یک عنصر استفاده می کنیم جابجایی و تغییر شکل آن عنصر تاثیری بر روی عناصر مجاور آن نخواهد داشت:
لطفا با تغییر مقادیر تابع در دموی زیر به درک بهتر موضوع کمک کنید. توجه داشته باشید که چرخش در حالت hover صورت می گیرد و همینطور از transition برای واضح شدن حرکت استفاده شده است:
See the Pen rotate() by Mojtaba Seyedi (@seyedi) on CodePen.
سلام
یه سوال دارم
نمیشه ما کاری کنیم چرخشمون بدون هاور و نامحدود انجام بشه؟ یعنی تا صفحه رو باز کردیم شروع کنه به چرخش نامحدود؟
اگر نمیشه راه حلش استفاده از انیمیشنه؟
سلام، اره دیگه دقیقا، انیمیشن کارش همینه
سلام
ممنون آموزش های عالیتون
من می خام چرخش حول یک نقطه باشه. میخام حول نقطه ای خارج از اون عکس یا تگ باشه.ممنون
سلام،
این شاید کمکتون کنه:
http://css-tricks.ir/reference/transform-origin
با سلام من یک همچین کدی دارم
:div class=”spinner” style=”user-select: none;transform>
<";(rotate(229.885deg) translateZ(0px
یه اسکریپتی باید بنویسم که در کنسول گوگل کروم هم اجرا بشه و اسکریپت برام این کار رو انجام بده که بعد از اجراش در کنسول
گوگل کروم این تصویر به صورت نامحدود با سرعت متوسط در حال چرخیدن باشه.
اگر جواب بدین ممنون میشم … باتشکر
بابا دمت گرم خیلی باحالید .
سلام نمیشه ک این چرخش رو مثلا روی صفحه بزاریم ؟؟ یعنی برای باز شدن صفحه منو ما بیایم یک چرخش بزاریم ک صفحه اصلی ک چرخید صفحه منو اون کنار باز بشه..الان نمیشه بهتر از این توضیح داد ..اگ یک آیدی تلگرام بدین فیلمشو بفرستم براتون