با استفاده از تابع 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.
عالی بود ؛
یه سوال ؛
چطوری شما این transform رو برای سایت خودتون گذاشتید که بدون hover خودش بین دوتا ترنسفرم حرکت میکنه ؟
من آخرش تو این کار شما موندم چیکار میکنید یک موشن با بارگزاری سایت شروع به حرکت کنه و تبدیل بشه به یک موشن دیگه !
من از animated استفاده کردم تا حالا ولی اون محدودیت داره و سه بعدی نمیشه انجام داد باهاش
سپاس
اگر هنوز مطالب مربوط به انیمیشن رو نخوندین حتما بخونید.
ببنید کافیه توی CSS یه کلاس تعریف کنید و توی اون کلاس انیمیشنتون رو معرفی کنید. بعد هم روی onload صفحه توی جاوااسکریپت اون کلاس رو به عنصرتون اضافه کنید.
موفق باشید.
یاد گرفتممممممممممممممممممممممممم
ایولللللللللل
عاشقتونم
توی فایل js یه addClass باید بزاریم که وقتی صفحه لود شد ، اون کلاس translate3d به عنصر اضافه بشه و اونی بشه که من از یاد گرفتنش لذت بردم :-)
مثل همیشه عالی بود
دمتون گرم.
دقیقا قسمت z چه کاری انجام میده؟
چون اگه از translate(x, y) هم استفاده کنیم همین نتیجه رو میده.
در واقع محور z محوری هست که شی رو به جلو و عقب حرکت میده
و با این حرکت میتونی از بقیه اشیا رد بشی بیای به سمت جلو و بر عکس
سلام
استاد translate3d مقدار درصدی نمیگیره !!!
سلام. میگیره خوبم میگیره! :)
سلام آموزش عالی بود
ولی یه سوال دارم چیکار کنیم که بعد لود شدن صفحه اشیا حرکت خودکار داشته باشند و نیار به حرکت موس رواونها نباشه
با انیمیشن این کار انجام میشه
https://css-tricks.ir/reading-list/animation