در CSS، قابلیت transform یکی از امکانات پیشرفته است که به شما اجازه اعمال تغییرات مختلف بر روی عنصر انتخابی را می‌دهد. یکی از توابع مهم در transform، تابع scaleY() است که به شما امکان تغییر مقیاس عنصر را در جهت عمودی می‌دهد. با استفاده از این تابع، می‌توانید اندازه عنصر را به طور عمودی تغییر دهید بدون اینکه به اندازه افقی آن دست بزنید.
این تابع خیلی کاربردی است به خصوص زمانی که بخواهید ظاهر المانی را در صفحه وب تغییر دهید بدون اینکه حالت اصلی آن آسیب ببیند. به طور مثال، می‌توانید طول یک دکمه را بر اساس تعامل کاربر افزایش دهید یا کوچک کنید تا بیشتر جلب توجه کند.
کار با scaleY() در CSS به خودی خود بسیار ساده است. تنها کافی است که متغیر scaleY را با مقداری که می‌خواهید تغییر مقیاس در آن جهت اعمال شود استفاده کنید. مقدار ۱، همان اندازه اصلی عنصر است و هر مقدار کمتر یا بیشتر، مقیاس را کاهش یا افزایش می‌دهد.
بهتر است برای اطمینان از تاثیر درست scaleY() در مرورگرهای مختلف، همیشه استفاده از پیشوندهای مرورگر را نیز در نظر داشته باشید. این کار به شما کمک می‌کند تا اطمینان حاصل کنید استایل‌هایتان در تمام مرورگرها به شکل درستی نمایش داده می‌شوند.
کد نمونه استفاده از scaleY
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: transform 0.5s;
}
.box:hover {
transform: scaleY(1.5);
}
</style>
<div class="box"></div>
شرح خط به خط کد
<style>در اینجا ما استایل‌های CSS خود را تعریف کرده‌ایم.
.boxما کلاسی به نام box تعریف کرده‌ایم که شامل خصوصیات اندازه و رنگ پس‌زمینه است.
width: 100px;این خط عرض عنصر را به ۱۰۰ پیکسل تعیین می‌کند.
height: 100px;این خط ارتفاع عنصر را به ۱۰۰ پیکسل تعیین می‌کند.
background-color: red;رنگ پس‌زمینه عنصر را قرمز کرده‌ایم.
transition: transform 0.5s;زمان تغییر انیمیشن برای transform را ۰.۵ ثانیه تنظیم کرده‌ایم.
.box:hoverوقتی که موس بر روی عنصر-hover برود، این استایل‌ها اعمال خواهند شد.
transform: scaleY(1.5);مقیاس عمودی عنصر را ۱.۵ برابر حالت اولیه‌اش تغییر می‌دهیم.
</style>پایان بخش تعریف استایل‌های CSS.
<div class="box"></div>یک عنصر div با کلاس box ایجاد کرده‌ایم.