صفحه اصلی مقالات تابع translate برای ویژگی transform

تابع translate برای ویژگی transform

تابع 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

استاد : مریم شیردل

مطالب زیر را هم مطالعه کنید 

آموزش تابع rotate در خصوصیت transform

خصوصیت فیلتر در سی اس اس

سوالی دارید؟ از من بپرسید

سلام چطور میتونم کمکتون بکنم؟