سلام بچهها!
امروز میخوایم با ویژگی جادویی transform در CSS آشنا بشیم.
این ویژگی همونطور که از اسمش پیداست، میتونه ظاهر تگ ها رو تبدیل و دستکاری کنه.
قراره یاد بگیریم چطور یک تگ رو در چهار حالت اصلی تغییر بدیم:
- چرخاندن (Rotate) 🌀
- تغییر اندازه یا مقیاس (Scale) 📏
- کج کردن (Skew) 📐
- جابجایی پوزیشن ( (Translate) ↔️
1️⃣ چرخاندن — rotate()
🔹 توی مرورگر یک صفحه نمونه داریم. دو باکس روی صفحه هست:
- Example A
- Example B
میخوایم فقط Example A رو دستکاری کنیم.
در CSS، داخل قانون .example-a این کد رو مینویسیم:
transform: rotate(25deg);
- مقدار داخل پرانتز درجه است (deg).
- مثبت = ساعتگرد ⏩
- منفی = پادساعتگرد ⏪
📌 مثالها:
rotate(90deg) /* چرخش ۹۰ درجه */
rotate(-15deg) /* ۱۵ درجه پادساعتگرد */
rotate(360deg) /* یک دور کامل؛ ظاهر مثل حالت اولیه */
2️⃣ تغییر مقیاس — scale()
🔹 برای بزرگ/کوچککردن تگ از scale() استفاده میکنیم.
واحد پیکسلی نداره؛ عددی که مینویسیم یک ضریب ضربی است:
transform: scale(1.3); /* ۳۰٪ بزرگتر */
transform: scale(2); /* دو برابر */
transform: scale(0.5); /* نصف اندازه */
💡 نکته مهم: تغییر مقیاس فقط روی خود تگ اثر میگذارد و فضای اشغالشده در جریان عادی صفحه تغییر نمیکند.
یعنی اگه یک تگ رو بزرگ کنید، روی موقعیت بقیه تگ ها تاثیری نداره و ممکنه روی اونها بیفته.
3️⃣ کج کردن — skew()
🔹 برای موربکردن یک تگ مستطیلی (مثل تبدیل به متوازیالاضلاع) استفاده میکنیم.
transform: skewX(15deg); /* افقی */
transform: skewY(-25deg); /* عمودی */
و حتی میتونیم ترکیب کنیم:
transform: skewX(15deg) skewY(5deg);
4️⃣ ترکیب چند transform
همه توابع transform رو میتونیم پشت سر هم توی یک خط بنویسیم:
transform: rotate(20deg) scale(1.5);
این یعنی همزمان چرخاندن و بزرگکردن.
5️⃣ نقطهی مبدا تغییر — transform-origin
🔹 این ویژگی تعیین میکنه که تغییر از کجا اتفاق بیفته:
- بهطور پیشفرض وسط تگ (50% 50%) است.
- مثال:
transform-origin: 0 0; /* بالا-چپ */
transform-origin: 100% 0; /* بالا-راست */
📌 دو مقدار = افقی (X) و عمودی (Y) — میتونیم درصد یا پیکسل بدیم.
6️⃣ جابجایی — translate()
🔹 برای حرکتدادن تگ بدون تاثیر روی بقیه استفاده میشه.
- حرکت عمودی:
transform: translateY(20px);
- حرکت افقی:
transform: translateX(100px);
- حرکت همزمان:
transform: translate(100px, 50px); /* اول افقی، بعد عمودی */
💡 فرقش با position: relative اینه که translate سختافزاری شتابگرفتهست و برای انیمیشن خیلی نرم و روان عمل میکنه.
🔄 مرور سریع
- rotate() → چرخاندن
- scale() → تغییر اندازه
- skew() → کج کردن
- translate() → جابجایی
- transform-origin → تعیین نقطه مرجع تغییر
حتماً! اینم ترجمه کامل و کلمهبهکلمهی متن شما با لحن دوستانه و مناسب برای یک اسکریپت ویدیوی آموزشی 🎥👇
موضوع نهایی این درس استفاده از ویژگی transform برای کنترل موقعیتدهی محتواست. اولین بخش از تنظیم موقعیت محتوا، به صورت یک ویژگی به نام transform-origin ظاهر میشه.
حالا قبل از اینکه وارد این ویژگی جدید بشیم، بیایید اول مثالی که از transform داشتیم رو سادهتر کنیم. من قراره Rotti رو حذف کنم. بنابراین تنها افکتی که روی باکس مثال A اعمال شده اینه که scale رو ۱.۵ برابر کردیم. و متوجه میشید که انگار محتوا در هر چهار جهت گسترش پیدا کرده. یا به عبارتی، انگار از مرکز اصلی خودش به عنوان نقطهی مرجع یا نقطهی چرخش یا transform-origin استفاده کرده.
خب، حالا فرض کنید که بخوایم محتوا از گوشهی بالا سمت چپ خودش رشد کنه و فقط در اون جهت گسترش پیدا کنه. اینجاست که ویژگی transform-origin وارد عمل میشه.
پس اگر دنبال این هستیم که گوشهی بالا سمت چپ نقطهی چرخش باشه، میتونیم مقدار 0 0 رو بنویسیم.
بیایید سینتکس یا نحوهی نوشتن این دستور رو مرور کنیم. این دو مقدار، موقعیت افقی و عمودی نقطهی شروع یا نقطهی چرخش برای transform رو مشخص میکنن. یه جورایی میتونید اینا رو مثل طول و عرض جغرافیایی برای نقطهی شروع در نظر بگیرید.
ما از 0 0 استفاده کردیم تا گوشهی بالا سمت چپ محتوای اصلی رو مشخص کنیم. بهطور پیشفرض، مرورگر مقدار 50 درصد 50 درصد رو استفاده میکنه. پس این باید براتون آشنا باشه. این دقیقاً همون حالتیه که مرورگر موقعیت transform رو تنظیم میکنه اگر هیچ کدی برای نقطهی شروع ننوشته باشیم.
حالا برای اینکه این سیستم کاملاً براتون جا بیفته، فرض کنید که بخوایم نقطهی شروع یا نقطهی چرخش، گوشهی بالا سمت راست محتوای اصلی باشه. یعنی بخوایم محتوا در اون جهت رشد کنه. پس از نظر افقی باید کل مسیر رو طی کنیم، یعنی 100 درصد. و از نظر عمودی نیازی نیست هیچ حرکتی کنیم، فقط در بالاترین نقطه باقی میمونیم.
عالیه! پس transform-origin اولین روش مرتبط با transform برای کنترل موقعیتدهی محتواست.
بیایید بریم سراغ بخش دوم. این یکی کمی سادهتره برای درک.
من قراره هر دو خط کد قبلی رو حذف کنم، پس دوباره از نقطهی شروع شروع میکنیم.
فرض کنید که بخوایم باکس مثال A، ۲۰ پیکسل پایینتر از جای طبیعی خودش روی صفحه قرار بگیره، اما نمیخوایم بقیهی صفحه هم واکنش نشون بده. یعنی نمیخوایم مثال B هم ۲۰ پیکسل پایینتر بره. فقط میخوایم روی باکس مثال A تأثیر بذاریم، مستقل از بقیهی صفحه.
ما میتونیم از ویژگی transform استفاده کنیم و از تابعی به نام translateY بهره ببریم.
من این تابع رو با مقدار ۲۰ پیکسل مینویسم، و میبینیم که باکس ما ۲۰ پیکسل پایینتر رفته و بقیهی صفحه هیچ واکنشی نشون نداده.
حتی اگر این مقدار رو به ۵۰ پیکسل افزایش بدیم، فقط روی محتوای زیرش همپوشانی ایجاد میکنه. محتوای زیرش خودش رو تطبیق نمیده و پایینتر نمیره.
پس این یه مثال از translateY بود که به ما اجازه میده در محور Y حرکت کنیم، یعنی به صورت عمودی.
اگر بخوایم به سمت راست حرکت کنیم، میتونیم از تابعی به نام translateX استفاده کنیم.
اگر مقدار ۱۰۰ پیکسل رو مشخص کنم، میبینیم که باکس ما ۱۰۰ پیکسل به سمت راست حرکت کرده.
حالا در مواردی که بخوایم هم به صورت عمودی و هم افقی حرکت کنیم، میتونیم این دو رو در یک تابع ترکیب کنیم که اسمش هست translate.
ما مقدار افقی رو اول میدیم و مقدار عمودی رو دوم. و دقیقاً همون افکت رو داریم.
توجه کنید که بعد از مقدار اول، یه کاما گذاشتیم. پس این شد تابع translate بهطور خلاصه.
حالا ممکنه با خودتون فکر کنید که چرا باید از transform translate استفاده کنیم وقتی میتونیم خیلی راحت از position: relative استفاده کنیم و با top و left همون افکت رو ایجاد کنیم؟
سؤال خیلی خوبیه! و هیچ راهی برای پاسخ دادن بهش نیست جز اینکه بگم قراره در درس بعدی بهش بپردازیم.
برای اهداف چیدمان، استفاده از position: relative همراه با top، left یا bottom، right کاملاً منطقیه.
اما همونطور که در درس بعدی یاد میگیریم، استفاده از transform translate زمانی منطقیه که بخوایم محتوا رو به صورت نرم و روان از یک موقعیت به موقعیت دیگه منتقل یا انیمیت کنیم.
بله، درست شنیدید! ما میتونیم از CSS برای انیمیت کردن محتوا استفاده کنیم.
فعلاً فقط بدونید که تابع translate به صورت سختافزاری شتابدهی شدهست. یعنی وقتی در درس بعدی بخوایم محتوا رو از یک موقعیت به موقعیت دیگه انیمیت کنیم، اگر از translate استفاده کنیم، انیمیشن خیلی نرم و روان خواهد بود. در حالی که اگر بخوایم top یا left رو انیمیت کنیم، ممکنه کمی لرزش داشته باشه.
البته در چارچوب این درس داریم خیلی جلوتر از خودمون حرکت میکنیم و نمیخوام شما رو با بحث انیمیشنها گیج کنم.
فقط میخواستم بدونید که چرا تابع translate مفیده.
پس برای جمعبندی این درس، یه مرور سریع داشته باشیم:
یاد گرفتیم که میتونیم از ویژگی transform برای دستکاری محتوا استفاده کنیم. و چرخش (rotate)، مقیاسدهی (scale)، کجکردن (skew)، جابهجایی (translate) رو مرور کردیم. و همچنین یاد گرفتیم چطور با استفاده از ویژگی transform-origin کنترل دقیقتری روی تغییرات داشته باشیم.