translateX() Function
تابع ()translateX
در CSS عنصر را در راستای محور افقی (X
) جابجا می کند.
نحوه نوشتار
transform: translateX(30px); transform: translateX(-10%); transform: translate(x);
مقادیر
X
عنصر را در راستای محور افقی (X
) جابجا می کند. این مقدار می تواند با استفاده از واحدهای اندازه 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; flex-direction: column; margin: 20px 0; } div { width: 90px; height: 90px; } .box1, .box3 { background-color: lightgreen; } .box2, .box4 { background-color: pink; } .box2 { transform: translateX(-10px); } .box4 { transform: translateX(50%); }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این تابع CSS پشتیبانی می کنند.