تبدیل‌ها (Transforms) در CSS
در جلسهٔ قبل یاد گرفتید تغییر چقدر طول بکشد. Transform مشخص می‌کند پیکسل‌ها کجا بروند: یک برچسب کمی کنار برود، آیکن لودر بچرخد، روی هاور نشان بزرگ‌تر شود — معمولاً بدون اینکه همسایه‌ها مثل margin یا top جابه‌جا شوند.
transform چه چیزی را عوض می‌کند؟
transform روی جعبهٔ رسم‌شده نقشهٔ دوبعدی (و بعداً سه‌بعدی) می‌کشد. جایگاه عنصر در چیدمان همان می‌ماند، مگر خودتان با عرض یا چیز دیگری جریان را جابه‌جا کنید. برای همین translate() و بقیه برای حرکت ریز — هاور، باز/بسته، اصلاح کوچک — انتخاب خوبی‌اند.
یک ویژگی، چند تابع — داخل یک مقدار transform لیست با ویرگول نمی‌آید؛ ولی توابع را پشت سر هم در یک اعلان می‌چینید: transform: translateX(1rem) rotate(8deg) scale(1.05);
توابع اصلی ۲D
📊 نگاهی به توابع transform دوبعدی
| تابع | کار معمول |
|---|---|
translate(x, y) / translateX / translateY |
جابه‌جایی دیداری بدون به‌هم‌ریختن چیدمان |
rotate(زاویه) |
چرخش آیکن، فلش، لودر (deg، turn) |
scale(x, y) / scale(n) |
بزرگ/کوچ کردن روی هاور؛ مقدار را معقول نگه دارید |
skew(x, y) |
کج کردن — کم استفاده؛ زاویهٔ کوچک |
زاویه با deg یا turn می‌نویسید. درصد در translate() نسبت به اندازهٔ خود عنصر است — برای ترفندهای وسط‌چین با position: absolute به درد می‌خورد.
اول translate — حرکت روزمره
فقط می‌خواهید کمی جابه‌جا شود؟ قبل از top و margin سراغ translate بروید. مرورگر اغلب لایهٔ transform را روی compositor نگه می‌دارد و با transition جلسهٔ قبل حرکت نرم‌تر می‌شود.
.chip {
display: inline-block;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: #e0e7ff;
color: #1e3a8a;
transition: transform 0.2s ease, background-color 0.2s ease;
}
.chip:hover,
.chip:focus-visible {
transform: translateY(-0.15rem);
background: #c7d2fe;
}
chip بالا می‌آید ولی جای خط در صفحه عوض نمی‌شود. همان کار با margin-top منفی روی هاور را امتحان کنید — همسایه‌ها می‌پرند.
rotate و scale با هم
روی آیکن و badge معمولاً scale کوچک با rotate می‌آید. زاویه را کم نگه دارید؛ UI حرفه‌ای بماند، نه شلوغ.
.badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.875rem;
transition: transform 0.25s ease;
}
.badge:hover {
transform: scale(1.06);
}
.chevron {
display: inline-block;
transition: transform 0.2s ease;
}
.menu-open .chevron {
transform: rotate(180deg);
}
scale(1.06) یعنی تأکید؛ scale(2) اغلب اشتباه است. rotate(180deg) برای chevron یعنی «باز شده» — با کلاس روی HTML/JS جفتش کنید.
transform-origin — لولای حرکت
پیش‌فرض، چرخش و بزرگ‌نمایی از وسط جعبه است. با transform-origin محور را عوض می‌کنید: پایین-چپ مثل در، بالا-وسط برای حس flip، 50% 100% برای تب که از پایه خم شود.
.panel-tilt {
transform-origin: 50% 100%;
transition: transform 0.35s ease;
}
.panel-tilt.is-open {
transform: rotateX(12deg);
}
اینجا rotateX ملایم فقط برای واژگان transform است. صحنهٔ سه‌بعدی کامل در جلسهٔ اختیاری 3D Transforms است؛ در این درس مهم origin است: همان زاویه با pivot دیگر حس متفاوتی می‌دهد.
با transition جفت کنید؛ از layout دوری کنید
transition را روی قانون پایه بگذارید و transform (و opacity) را برای هاور/باز شدن انیمیت کنید — نه width/height/top. با prefers-reduced-motion: reduce چرخش و scale تزئینی را کوتاه یا حذف کنید.
خودتان امتحان کنید
- دکمه را با
translateY(-0.2rem)وtransitionکوتاه روی هاور بالا ببرید؛ همان را باmargin-topامتحان کنید و جابه‌جایی همسایه را ببینید. - وقتی والد
.is-openگرفت، chevron را180degبچرخانید؛ مدت حدود0.2s. - روی کارت
transform-origin: left centerبگذارید وrotateکوچک بدهید — با مبدأ وسط مقایسه کنید. - روی هاور tag در یک
transformبنویسید:translateX(0.5rem) scale(1.04). - در DevTools حالت
prefers-reduced-motion: reduceرا بزنید و حرکت غیرضروری را کم کنید.
اشتباه‌های رایج
- برای «بالا آمدن» هاور به‌جای
translateازtop/left/marginاستفاده کردن rotate(45deg)روی wrapper بزرگ — کل صفحه می‌چرخد- فراموش کردن
transform-originدر UI لولایی — همه از وسط می‌چرخند scale(0)برای مخفی کردن بدون برنامه برای focus و دسترس‌پذیری- رفتن سراغ perspective سنگین وقتی translate + opacity کافی است
جمع‌بندی
transformجعبهٔ رسم‌شده را جابه‌جا می‌کند؛ جریان چیدمان معمولاً همان می‌ماند- translate، rotate، scale و skew را با اندازه استفاده کنید؛ توابع را در یک transform بچینید
transform-originمحور چرخش/بزرگ‌نمایی است- transform را با transition جفت کنید؛ به‌جای layout از transform/opacity استفاده کنید
- بعدی در Effects & Motion: انیمیشن CSS (
@keyframes)
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود