بروز رسانی بهمن ۱ام, ۱۳۹۹ ۳:۳۴ بعد از ظهر
فروردین ۱۷, ۱۳۹۵ admin آموزش پیشرفته css, آموزش مقدماتی css 0
با بهره بری و استفاده از تابع 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.
بهمن ۰۱, ۱۳۹۹ 0
دی ۲۶, ۱۳۹۹ 0
خرداد ۰۳, ۱۳۹۹ 0
اردیبهشت ۰۹, ۱۳۹۹ 0
مرداد ۱۲, ۱۳۹۹ 0
اردیبهشت ۰۸, ۱۳۹۹ 0
خرداد ۱۴, ۱۳۹۶ 0
اردیبهشت ۱۰, ۱۳۹۶ 0