()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.

 

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

4 دیدگاه برای “()translate3d

  1. عالی بود ؛
    یه سوال ؛
    چطوری شما این transform رو برای سایت خودتون گذاشتید که بدون hover خودش بین دوتا ترنسفرم حرکت میکنه ؟
    من آخرش تو این کار شما موندم چیکار میکنید یک موشن با بارگزاری سایت شروع به حرکت کنه و تبدیل بشه به یک موشن دیگه !
    من از animated استفاده کردم تا حالا ولی اون محدودیت داره و سه بعدی نمیشه انجام داد باهاش
    سپاس

    1. اگر هنوز مطالب مربوط به انیمیشن رو نخوندین حتما بخونید.

      ببنید کافیه توی CSS یه کلاس تعریف کنید و توی اون کلاس انیمیشنتون رو معرفی کنید. بعد هم روی onload صفحه توی جاوااسکریپت اون کلاس رو به عنصرتون اضافه کنید.

      موفق باشید.

    2. یاد گرفتممممممممممممممممممممممممم
      ایولللللللللل
      عاشقتونم
      توی فایل js یه addClass باید بزاریم که وقتی صفحه لود شد ، اون کلاس translate3d به عنصر اضافه بشه و اونی بشه که من از یاد گرفتنش لذت بردم :-)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *