تابع translate برای ویژگی transform
نویسنده : مریم شیردل
تابع translate برای ویژگی transform translate() - translateX()-translateY()-translateZ()-translate3d()
آموزش css
تابع translate برای ویژگی transform
translate() - translateX()-translateY()-translateZ()-translate3d()
یکی از توابع ویژگی transform تابع translate است .با استفاده از این تابع میتوان عناصر را بصورت دو بعدی یا سه یعدی در صفحه جا به جا کرد
کد زیر عنصر را 60px در جهت افقی(x) و 50px در جهت عمودی (y) حرکت میدهد.
transform: translate(60px, 50px);
ولی کد زیر فقط در جهت افقی (x) عنصر را جا بجا میکند
transform: translateX(20px);
وکد زیر فقط در جهت عمودی(y) عنصر را جا به جا میکند
transform: translateY(40px);
و کد زیر عصر را در جهت محور z ها به صورت سه بعدی جا به جا میکند .میتوانید از درصد نیز استفاده کنید.
transform: translateZ(200px);
و برای استفاده از جا به جایی در هر سه جهت از مقدار زیر استفاده کنید
transform: translate3d(40px, 50px, -150px);
کد زیر را اجرا کنید برای بهتر دیده شدن نتیجه از transition استفاده شده .اون رو در جلسات بعد آموزش میدهیم.
1