با بهره بری و استفاده از تابع 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.

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