ویژگی rotate در CSS یکی از قابلیت‌های transform است که به شما امکان می‌دهد عناصر را حول یک نقطه مشخص بچرخانید.

این چرخش می‌تواند در جهت ساعتگرد یا پادساعتگرد باشد. همچنین، با استفاده از ویژگی transform-origin می‌توان نقطه مرجع چرخش را تغییر داد.

۱. چرخش (Rotate) در CSS

برای اعمال چرخش روی یک عنصر، از transform: rotate() استفاده می‌شود. مقدار این ویژگی معمولاً بر حسب درجه (deg) تعیین می‌شود.

مثال ساده چرخش یک عنصر:

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transform: rotate(45deg); /* چرخش ۴۵ درجه در جهت عقربه‌های ساعت */
}

✅ این کد عنصر را ۴۵ درجه در جهت عقربه‌های ساعت می‌چرخاند.
✅ مقدار منفی باعث چرخش در جهت پادساعتگرد می‌شود:

.box {
    transform: rotate(-30deg); /* چرخش ۳۰ درجه در جهت پادساعتگرد */
}

۲. تأثیر transform-origin در چرخش

به طور پیش‌فرض، چرخش حول مرکز عنصر (center) انجام می‌شود. اما با transform-origin می‌توان نقطه چرخش را تغییر داد.

نحوه استفاده از transform-origin:

.box {
    transform: rotate(45deg);
    transform-origin: top left; /* نقطه چرخش گوشه بالا-چپ خواهد بود */
}

✅ مقدار transform-origin می‌تواند مقادیر مختلفی داشته باشد، مانند:

• center (پیش‌فرض) → چرخش حول مرکز
• top left → چرخش حول گوشه بالا-چپ
• bottom right → چرخش حول گوشه پایین-راست
• 50% 50% → برابر با center
• 20px 30px → چرخش حول مختصات سفارشی

مثال: چرخش حول پایین-راست

.box {
    transform: rotate(45deg);
    transform-origin: bottom right; /* چرخش حول گوشه پایین-راست */
}

✅ این کد باعث می‌شود عنصر از گوشه پایین-راست چرخش کند، نه مرکز.

۳. ترکیب Rotate با سایر Transform‌ها

چرخش را می‌توان با سایر ویژگی‌های transform مانند translate و scale ترکیب کرد.

مثال: ترکیب چرخش و جابجایی (Translate)

.box {
    transform: translate(50px, 20px) rotate(30deg);
}

✅ این کد ابتدا عنصر را جابجا کرده و سپس ۳۰ درجه می‌چرخاند.

مثال: ترکیب چرخش و تغییر مقیاس (Scale)

.box {
    transform: rotate(45deg) scale(1.2);
}

✅ این کد ابتدا عنصر را ۴۵ درجه می‌چرخاند و سپس آن را ۱.۲ برابر بزرگ‌تر می‌کند.

۴. چرخش سه‌بعدی (3D Rotation)

علاوه بر rotate(), در CSS می‌توان از چرخش سه‌بعدی با rotateX(), rotateY(), و rotateZ() نیز استفاده کرد.

مثال: چرخش حول محور X

.box {
    transform: rotateX(45deg);
}

✅ این کد باعث می‌شود عنصر حول محور X چرخش سه‌بعدی پیدا کند.

مثال: چرخش حول محور Y

.box {
    transform: rotateY(60deg);
}

✅ این کد عنصر را حول محور Y ۶۰ درجه می‌چرخاند.

مثال: چرخش حول محور Z (معادل rotate معمولی)

.box {
    transform: rotateZ(30deg);
}

✅ rotateZ() همان rotate() است و چرخش در صفحه دوبعدی انجام می‌شود.

۵. انیمیشن چرخش با CSS

چرخش را می‌توان در انیمیشن‌ها و افکت‌های تعاملی استفاده کرد.

مثال: انیمیشن چرخش بی‌نهایت

@keyframes rotateAnimation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.box {
    animation: rotateAnimation 2s linear infinite;
}

✅ این کد یک عنصر را هر ۲ ثانیه ۳۶۰ درجه می‌چرخاند و به صورت بی‌نهایت تکرار می‌شود.

جمع‌بندی

✔ rotate() برای چرخش عناصر حول یک نقطه استفاده می‌شود.
✔ مقدار چرخش را می‌توان بر حسب deg تنظیم کرد.
✔ transform-origin تعیین می‌کند که چرخش حول چه نقطه‌ای انجام شود.
✔ چرخش را می‌توان با ویژگی‌های دیگر transform ترکیب کرد.
✔ چرخش سه‌بعدی با rotateX(), rotateY(), و rotateZ() امکان‌پذیر است.
✔ می‌توان از animation برای ایجاد چرخش مداوم استفاده کرد.

با یادگیری این مفاهیم، می‌توانید جلوه‌های چرخشی جذابی را در طراحی وب اعمال کنید! 🚀