در جلسه اول از آموزش انیمیشن‌سازی با CSS به طور کلی به آموزش کار با translate پرداختیم. اما در این جلسه قصد داریم به آموزش کار با scaleX در css بپردازیم. همانطور که می‌دانید انیمیشن‌سازی در css به یک کار بسیار محبوب تبدیل شده است.
اکثر UIکارها به این تکنیک‌ها مسلط هستند و دوست دارند از طریق صفحات جذاب‌تری را طراحی کنند. با استفاده از انیمیشن‌سازی در CSS شما می‌توانید صفحات جذاب‌تر اما با دردسر کمتری تولید کنید. در این جلسه به آموزش ()scaleX و ()scaleY و ()scale می‌پردازیم که از جمله مباحث مهم در انیمیش‌سازی هستند. اگر علاقه‌مند به این موضوع هستید با ما همراه باشید.
از Scale در چه مواردی استفاده می‌شود؟
از خاصیت translate زمانی استفاده می‌شد که می‌خواستیم یک عنصر را در جهت خاصی حرکت دهیم. به عنوان مثال 20 پیکسل به سمت راست یا پایین ببریم. اما با استفاده از خاصیت Scale شما می‌توانید عناصر مختلف صفحه را در جهت مشخصی به عنوان مثال چپ یا راست کوچک و یا بزرگ کنید. به عبارتی می‌توانید سایز عناصر را با یک سری اعداد تغییر دهید.
هم‌چنین می‌توانید عناصر را قرینه کنید. استفاده از این تکنیک در برخی از موارد می‌تواند بسیار کاربردی باشد حتما تا کنون نمونه‌هایی از عناصر را دیده‌اید که به محض این که Hover می‌شوند شروع به قرینه شدن می‌کنند. این خاصیت معمولا در کارت‌هایی که در صفحه قرار دارد بسیار کاربردی است و معمولا از آن استفاده می‌شود.
اصولا در طراحی ممکن است در بخش‌های مختلفی از این خاصیت استفاده کنید ولی هر گاه قرینه شدن عناصر در صفحه را دیدید به یاد scale باشید.
آموزش کار با scaleX در css
بهتر است بدون مقدمه‌چینی بیشتر به سراغ نحوه کار با Scalex در css برویم. استفاده از این خاصیت نیز همانند Translate است. شما می‌توانید به راحتی همانند کد زیر از آن استفاده کنید.
transform: scaleX(2);
همانطور که گفته شد زمانی که خاصیت transform را بر روی مقداری به غیر از none قرار دهید مبدا آن از گوشه به وسط تغییر می‌کند. به عبارتی مبدا محور مختصات به وسط صفحه تغییر می‌کند. در این حالت اگر کد بالا را به کدهای صفحه خودمان اضافه کنیم باید المان مد نظر دو برابر اندازه فعلی شود.
برای درک بهتر این مسئله بهتر است مثالی بزنیم. در این مثال ما یک مربع داریم که در وسط صفحه قرار دارد پس یک تگ div ایجاد می‌کنیم. سپس استایل‌های width و height را به آن نسبت می‌دهیم. در این مثال ما مقدار این دو را 50px گذاشته‌ایم.
هم‌چنین برای وسط‌چین شدن آن مقدار margin را بر روی auto قرار داده‌ایم. رنگ این مربع را نیز قرمز می‌کنیم. برای این کار کافی است مقدار background-color را Red بگذاریم. کدهای گفته شده به شکل زیر هستند.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 50px; height: 50px; margin: auto; background-color: red; } .box2:hover{ transform: scaleX(2); } </style> </head> <body> <div class="box"></div> </body> </html>
مقاله آموزش کار با scale در css با این طرز فکر نوشته شده است که شما به Html و Css مسلط هستید و نیازی به گفتن این موارد وجود ندارد. توضیحات گفته شده صرفا جهت یادآوری بود. در صورتی که به این موارد تسلط ندارید می‌توانید از دوره‌ای که در لینک زیر قرار دارد استفاده کنید.
دوره آموزش Html و CSS
اساسا از scale به سه شکل ()scaleX و ()scaleY و ()scale استفاده می‌شود که در ادامه به آن می‌پردازیم.
scaleX
همانطور که از نام این پارامتر پیداست از این دستور برای افزایش و یا کاهش سایز عناصر موجود در صفحه استفاده می‌شود. به عبارتی شما می‌توانید با استفاده از Scalex عنصر مد نظر را در محور X تغییر سایز دهید. برای این کار کافی است مقدار عددی را به آن اختصاص دهید. این پراپرتی به طور کلی به 4 روش مقدار دهی می‌شود که در جدول زیر توضیح داده شده است.
| عدد صحیح | اندازه المان را در عدد ضرب می‌کند به عنوان مثال ضربدر2 |
| عدد اعشاری | اندازه المان به نسبت کوچکتر می‌شود به عنوان مثال 0.5 اندازه المان را نصف می‌کند |
| عدد منفی | قرینه عنصر نمایش داده می‌شود به عنوان مثال 1- المان را کاملا معکوس می‌کند |
| عدد اعشاری منفی | به نسب کوچکتر می‌شود و قرینه هم می‌شود |
ممکن است جدول بالا کمی گنگ باشد به همین علت در پایین مثالی از هر کدام را آورده‌ایم.
scaleX(2) scaley(-2) scaley(0.4) scaley(-0.4)
در مثال بالا می‌بینید که 4 مدل عدد دهی به صورت کامل اجرا شده است. نکته‌ای که در این مثال وجود دارد این است که در برخی از موارد به جای Scalex از scaley استفاده شده است. در ادامه بیشتر در رابطه با scaley توضیح می‌دهیم.
scaley
این پراپرتی نیز همانند قبلی است. با این تفاوت که صرفا بر روی محور Y تاثیر می‌گذارد. در این حالت شما می‌توانید به راحتی اندازه عنصر را در محور Y هم کنترل کنید. این کار بسیار ساده است. استفاده از این دستور نیز کاملا همانند Scalex است و هیچ تفاوتی ندارد کافی است کد را به شکل زیر در قسمت Css صفحه مد نظر خودتان وارد کنید تا به نتیجه مد نظر برسید.
transform: scaley(-2);
کد بالا اندازه تصویر را دو برابر کرده و آن را قرینه می‌کند.
scale
این دستور می‌تواند مقادیر مختلفی را دریافت کنید. شما می‌توانید از دستور را با دو مقدار (y,x)scale مقدار دهی کنید. همانطور که مشخص است برای دو محور می‌تواند به صورت کوتاه شده مقدار دهی کرد. در صورتی که بخواهید تغییر اندازه در دو محور صورت بگیرد این کار کاملا امکان‌پذیر است.
این مقداردهی در حقیقت کوتاه شده دو دستور قبلی است. شما می‌توانید خروجی دستور زیر را ببینید که هیچ تفاوتی با دستورات قبلی ندارد و فقط کوتاه شده است.
transform:scale(-1,2);
خروجی کد بالا به شکل زیر است:
scaley(-1,2)
در این مثال می‌بینید که المان در راسته محور x معکوس شده و در راستای محور Y دو برابر می‌شود.
سخن آخر
همانطور که می‌دانید استفاده از انیمیشن‌ها در css بسیار متداول است. از این رو ما به آموزش کار با scaleX در css پرداخته‌ایم. در صورتی که به کدنویسی CSS و انیمیشن‌سازی در آن علاقه‌مند هستید بهتر است بعد از مطالعه این مقاله به خوبی آن را تمرین کنید تا مهارت لازم را به دست بیاورید.
در صورتی که از مطالعه این مقاله لذت بردید در بخش نظرات انتقادها و پیشنهادهای خودتان را با ما در میان بگذارید. شاد و موفق و پیروز باشید.
نوشته آموزش انیمیشن‌سازی با css جلسه دوم| آموزش کار با scaleX در css اولین بار در ادمین سایت. پدیدار شد.
بدون دیدگاه