()translate3d

با استفاده از تابع translate3d که برای ویژگی transform تعیین می شود می توان یک عنصر را در فضای سه بعدی حرکت داد.

این تابع نسخه سه بعدی تابع ()translate می باشد که با استفاده از بردار [tx, ty, tz] باعث تغییر مکان عنصر می شود که در اینجا tx انتقال در راستای محور X و ty انتقال در راستای محور Y و همینطور tz انتقال در راستای محور Z را مشخص می کنند. مقادیر این تابع می توانند واحدهای طولی یا درصدی داشته باشند.

مقادیر مثبت عنصر را در راستای مثبت محور و مقادیر منفی در راستای منفی محور جابجا می کنند.

 


transform: translate3d(100px, 100px, -200px);
transform: translate3d(50%, -100%, 10%);
transform: translate3d(-100px, -30px, 50px);

 

از واحدهای دیگری مثل em و rem و درصد و غیره هم می توانید برای مقدار دهی به این تابع استفاده کنید.

لطفا دموی زیر را بررسی کنید. توجه داشته باشید که تغییر مکان در حالت hover صورت می گیرد و همینطور از transition برای واضح شدن حرکت استفاده شده است:

 

See the Pen translate3d() by Mojtaba Seyedi (@seyedi) on CodePen.

 

پشتیبانی مرورگر ها