تابع ()scaleY در CSS

scaleY() Function

تابع ()scaleY در CSS مشخص می کند که عنصر بر مبنای محور عمودی یا Y تغییر اندازه می دهد.

نحوه نوشتاری

transform: scaleY(1.3);
transform: scaleY(0.5);

transform: scaleY(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 پشتیبانی می کنند.