تابع translateY در CSS

translateY() Function

تابع ()translateY در CSS عنصر را در راستای محور عمودی (Y) جابجا می کند.

نحوه نوشتار

transform: translateY(30px);
transform: translateY(-10%);

transform: translate(Y);

مقادیر

عنصر را در راستای محور عمودی (Y) جابجا می کند. این مقدار می تواند با استفاده از واحدهای اندازه CSS مانند (px, em, rem) مقداری ثابت باشد یا با استفاده از درصد، به میزان درصدی از طول عنصر مورد نظر، عنصر را جابجا کند.

در مثال زیر نحوه عملکرد این تابع CSS را میبینیم:

html

<section class="wrapper">
    <section>
        <div class="box1"></div>
        <div class="box2"></div>
    </section>
    <section>
        <div class="box3"></div>
        <div class="box4"></div>
    </section>
</section>

css

.wrapper {
    display: flex;
    justify-content: space-around;
}
.wrapper section {
    display: flex;
    margin: 20px 0;
}
div {
    width: 90px;
    height: 90px;
}
.box1,
.box3 {
    background-color: lightgreen; 
}
.box2,
.box4 {
    background-color: pink; 
}
.box2 {
    transform: translateY(-10px); 
}
.box4 {
    transform: translateY(50%); 
}

در این مثال مربع های سبز در جایگاه پیشفرض خود قرار گرفته اند و مربع های صورتی در راستای محور عمودی جابجا شده اند.

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این تابع CSS پشتیبانی می کنند.