سی‌اس‌اس/transform

transition

transform

animation

تبدیل و تغییر شکل عناصر در CSS

ویژگی transform در CSS به شما این امکان را می‌دهد که عناصر HTML را بدون تغییر در ساختار DOM، به‌صورت دو‌بعدی یا سه‌بعدی تغییر شکل (Transform) دهید. این ویژگی برای چرخش، تغییر اندازه، جابجایی، خم کردن، کج کردن و ترکیب این‌ها کاربرد دارد و در طراحی مدرن بسیار مهم است.

کاربردهای transform

ساخت انیمیشن‌های ساده یا حرفه‌ای
طراحی رابط کاربری تعاملی و جذاب
اعمال چرخش روی آیکون‌ها یا تصاویر
طراحی اسلایدر، گالری، کارت‌های معلق (hover cards)
خلق جلوه‌های ۳بعدی یا تعلیق بصری

سینتکس کلی

selector {
  transform: transformation-function;
}

مثال ساده:

div {
  transform: rotate(45deg);
}

انواع توابع transform

ویژگی transform توابع متنوعی دارد که می‌توان به صورت تکی یا ترکیبی استفاده کرد.

۱. translate(x, y) – جابجایی

جابجایی عنصر در راستای محور X و Y. (مثلاً به سمت راست یا پایین)

transform: translate(50px, 20px);

برای فقط X یا Y:

translateX(50px)
translateY(-30px)

۲. rotate(angle) – چرخش

چرخاندن عنصر به‌اندازهٔ مشخص (مثلاً 90 درجه):

transform: rotate(90deg);

مقدار angle می‌تواند منفی یا مثبت باشد. مقادیر معمول: 45deg، 90deg، 180deg، -30deg

۳. scale(x, y) – تغییر اندازه

تغییر مقیاس عنصر در محور X و Y.

transform: scale(1.5, 0.8);

scaleX(2) – دو برابر کردن عرض
scaleY(0.5) – نصف کردن ارتفاع

۴. skew(x, y) – کج کردن

کج کردن (خم کردن) عنصر بر اساس زاویه:

transform: skew(20deg, 10deg);

ترکیب چند transform

می‌توان چند تابع را به صورت پشت سر هم نوشت:

transform: translate(20px, 10px) rotate(45deg) scale(1.2);

ترتیب مهم است! مثلاً ابتدا چرخاندن و سپس جابجا کردن با جابجا کردن و سپس چرخاندن متفاوت است.

محور مختصات transform

نقطهٔ مرجع همهٔ transformها مرکز عنصر است، مگر اینکه با ویژگی transform-origin آن را تغییر دهید.

transform-origin

مشخص می‌کند نقطه‌ای که تغییر شکل از آن شروع شود کجاست (مثلاً بالا چپ، مرکز، پایین وسط):

transform-origin: top left;
transform-origin: 50% 100%;

Transform سه‌بعدی

ویژگی transform در حالت ۳بعدی نیز قابل استفاده است (در مرورگرهای مدرن):

rotateX(angle) – چرخش حول محور X
rotateY(angle) – چرخش حول محور Y
rotateZ(angle) – مشابه rotate
translateZ(px) – جابجایی در عمق
perspective – تعریف پرسپکتیو برای عمق واقعی

مثال:

.box {
  transform: rotateY(180deg);
  perspective: 1000px;
}

نکات مهم

transform تغییری در موقعیت واقعی در صفحه یا DOM ایجاد نمی‌کند. برای جابجایی واقعی بهتر است از position استفاده شود.
با transform می‌توان بدون نیاز به انیمیشن یا جاوااسکریپت، جلوه‌های حرکتی ساده ایجاد کرد.
برای ایجاد انیمیشن نرم، می‌توان از transition در کنار transform استفاده کرد.

مثال:

.card {
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
}

کاربرد در طراحی

hover روی دکمه‌ها یا کارت‌ها: zoom in با scale
منوهای کشویی: translateY برای باز و بسته شدن
اسلایدر عکس‌ها: translateX با transition
طراحی کارت‌های چرخان سه‌بعدی: rotateY با perspective

عملکرد و بهینه‌سازی

transform یکی از سریع‌ترین انیمیشن‌ها است چون توسط GPU پردازش می‌شود.
بهتر از تغییر مستقیم عرض و ارتفاع (width/height) در انیمیشن است.
استفادهٔ بیش از حد از transformهای پیچیده می‌تواند باعث افت عملکرد روی دستگاه‌های ضعیف شود.

مسائل مربوط به SEO

transform فقط مربوط به ظاهر است و تأثیر مستقیم بر سئو ندارد. اما:

رابط کاربری تعاملی و جذاب باعث ماندگاری بیشتر کاربر می‌شود.
تعامل بهتر معمولاً تجربهٔ کاربری (UX) را بهبود می‌دهد که برای گوگل اهمیت دارد.

تمرین پیشنهادی

یک کارت طراحی کنید که وقتی ماوس روی آن قرار گرفت:

کمی بزرگ شود (scale)
به سمت بالا حرکت کند (translateY)
کمی بچرخد (rotate)

و همهٔ این افکت‌ها با transition نرم اجرا شوند.

منابع بیشتر

جمع‌بندی

ویژگی transform ابزاری قدرتمند برای تغییر شکل و حرکت عناصر است. با توابعی مانند rotate، translate، scale و skew می‌توانید جلوه‌های بصری جذاب ایجاد کنید. این ویژگی در طراحی واکنش‌گرا، کارت‌های مدرن، منوها، و حتی بازی‌های ساده با CSS کاربرد دارد.