scaleY() Function
تابع ()scaleY
در CSS مشخص می کند که عنصر بر مبنای محور عمودی یا Y
تغییر اندازه می دهد.
نحوه نوشتاری
transform: scaleY(1.3); transform: scaleY(0.5); transform: scaleY(y);
مقادیر
Y
مقیاس اندازه عنصر را در راستای محور عمودی (Y
) مشخص می کند. مقادیرِ بیشتر از 1
مقیاس را بزرگتر، مابین 0
و 1
مقیاس را کوچکتر و برابر با 1
تغییری در مقیاس اندازه عنصر نمی دهد.
نکته: مقادیر منفی نیز در این تابع قابل استفاده هسنتند. مقادیر منفی علاوه بر تعیین نسبت اندازه عنصر، آن را نسبت به محور Y
معکوس می کند.
در مثال زیر نحوه عملکرد این تابع CSS را میبینیم:
html
<section> <div class="box">this is normal box.</div> </section> <section> <div class="box1">this is box1</div> <div class="box2">this is box2</div> <div class="box3">this is box3</div> </section>
css
section { display: flex; justify-content: space-around; flex-wrap: wrap; } div { width: 130px; height: 130px; background-color: pink; margin: 20px 0; display: flex; justify-content: center; align-items: center; } .box { background-color: lightgreen; } .box1 { transform: scaleY(-1.3); } .box2 { transform: scaleY(0.5); } .box3 { transform: scaleY(1.3); }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این تابع CSS پشتیبانی می کنند.