translateY() Function
تابع ()translateY
در CSS عنصر را در راستای محور عمودی (Y
) جابجا می کند.
نحوه نوشتار
transform: translateY(30px); transform: translateY(-10%); transform: translate(Y);
مقادیر
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 پشتیبانی می کنند.