انیمیشن های مدرن CSS ایجاد کنید

نقطه لنگر یک عنصر را با استفاده از Transform-Origin تغییر دهید

تو من را به هر طرف می کشانی

با تبدیل و زرادخانه آن ، شما چاقوی ارتش سوئیس از انیمیشن CSS را در جعبه ابزار خود دارید: بنابراین هیچ کاری نمی توانید انجام دهید.

به جز اینکه چیزی در حال چرخش باشد ...

یا مقیاس از بالا به پایین.

نکته مهم با تبدیل این است که ، به طور پیش فرض ، تمام عملیات آن از مرکز عنصر سرچشمه می گیرد ، بنابراین هر زمان که چیزی را مقیاس می کنید ، آن را به سمت خارج می کنید:

و هر وقت چیزی را می چرخانید ، می چرخید:

و گاهی اوقات خوب استاما اوقات دیگر ، این کار را انجام نمی دهد.

خوشبختانه ، CSS نیز خاصیت تبدیل به منشاء را به شما می دهد. این به شما امکان می دهد تا آن نقطه لنگر را در هر کجا که دوست دارید حرکت دهید و تحولات خود را از آنجا سرچشمه دهید.

این بدان معناست که می توانید منشأ را به بالا منتقل کرده و یک شی را به سمت پایین مقیاس دهید:

یا آن را به گوشه منتقل کنید و اجازه دهید نوسان شود:

در این فصل ، ما دقیقاً همین کار را می کنیم که شما و موارد خاص از خاصیت Transform-Origin را یاد می گیرید.

انتقال مرکز

برای تغییر در جایی که یک تحول از منشأ گرفته می شود ، شما ، البته ، برای کار با آن نیاز به تبدیل دارید. بیایید یک نوار بارگیری با یک قاب خالی ایجاد کنیم که به عنوان بارهای داده پر شود: در واقع نظارت بر پیشرفت بارگذاری نخواهد بود ، بلکه به عنوان یک انتقال بین دو بلوک محتوا عمل می کند.

ما قاب را با مرز و کمی بالشتک و نوار با رنگ پس زمینه طراحی کرده ایم ، که چنین چیزی را ارائه می دهد:

اکنون ، بیایید وارد شویم و ویژگی Transform را به نوار اضافه کنیم و مقیاس X را روی 0 تنظیم کنیم:

اکنون ما یک نوار پیشرفت خالی داریم!

برای پر کردن آن ، بیایید از: انتخاب کننده شبه فعال و خواهر و برادر ترکیبی استفاده کنیم تا نوار را به 100 ٪ عرض برگردانیم وقتی روی دکمه Load کلیک می کنیم:

اکنون وقتی روی دکمه کلیک می کنیم ، نوار بارگیری بلافاصله پر می شود.

برای پر کردن نوار به مرور زمان ، اجازه دهید یک انتقال را اضافه کنیم و در طی دو ثانیه آن را متحرک کنیم:

بیایید ببینیم اکنون نوار بارگیری چگونه رفتار می کند:

ما در حال رسیدن به آنجا هستیم! نوار در حال پر کردن متر است ، اما این کار را از مرکز انجام می دهد ، و ما آن را نمی خواهیم. میله های پیشرفت به طور معمول از لبه سمت چپ بارگیری می شوند و کنتور را به سمت راست پر می کنند. برای اصلاح نوار پیشرفت میانه ، اجازه دهید از خاصیت Transform-Origin استفاده کنیم.

Transform-Origin به شما امکان می دهد تا مرکز پیش فرض عنصر را بر اساس مقادیری که به آن اختصاص می دهید ، مرکز تحول خود را دور کنید.

فرآیند جابجایی مبدا درست مانند انجام ترجمه است: می‌توانید آن را از طریق واحدهای واقعی، مانند پیکسل‌ها، یا بر اساس درصدی از ابعاد عنصر، جابه‌جا کنید. هر روشی که انتخاب کنید، محور X از لبه سمت چپ عنصر اندازه گیری می شود، در حالی که محور Y از لبه بالایی اندازه گیری می شود.

بنابراین، حالت مرکزی پیش فرض مبدا تبدیل را می توان به صورت زیر نوشت: مبدا تبدیل: 50% 50%;

ما می‌خواهیم مبدا نوار پیشرفت خود را به لبه سمت چپ آن منتقل کنیم تا از کنار رشد کند، بنابراین اجازه دهید مبدا X را روی 0٪ تنظیم کنیم:

اکنون، وقتی مقیاس محور X نوار را از 0٪ تا 100٪ متحرک می کنیم، باید به عنوان یک برش در سمت چپ شروع شود و به سمت راست رشد کند تا زمانی که کادر را پر کند:

کامل! بیایید با افزودن یک تابع زمان بندی ()cubic-bezier به آن یک لمس نهایی بدهیم. ما دوست داریم که نوار بدون سهولت زیاد شروع به کار کند، اما در پایان کار به خوبی انجام شود. شاید چیزی با نمایه ای مانند این:

مقادیر منحنی شتاب ما به مکعب بیزیر (. 32، 0، 0. 07، 1) می رسد. بیایید آنها را به تابع زمان بندی انتقال وصل کنیم:

و آن را برای چرخش در نظر بگیرید:

بسيار خوب! نوار پیشرفت کامل شد!

بیایید صریح باشیم

وقتی نوبت به تنظیم مقادیر مبدا تبدیل می‌شود، به طول یا درصد محدود نمی‌شوید. همچنین می توانید از کلمات کلیدی CSS برای تعیین نقطه لنگر خود استفاده کنید، مانند چپ برای تنظیم مبدا در لبه چپ عنصر، یا راست برای قرار دادن آن در لبه سمت راست.

و می توانید از بالا و پایین برای تنظیم آن به ترتیب در لبه های بالا یا پایین استفاده کنید:

در واقع، کلمات کلیدی سمت چپ و بالا فقط روش های دیگری برای نوشتن 0٪ هستند و سمت راست و پایین همان 100٪ هستند.

پنجمین و آخرین کلمه کلیدی مرکز است، و می توان آن را به محور X یا Y اختصاص داد و (حدس زدید!) مانند تعیین مقدار 50٪ است:

تا به حال، ما همیشه دو مقدار را به transform-origin اختصاص داده‌ایم، یکی برای X-value و دیگری برای Y. اما می‌توانید به جای آن یک مقدار نیز به آن اختصاص دهید. اگر آن مقدار یک عدد باشد، آن را روی محور X اعمال می کند و مقدار Y را در مقدار پیش فرض 50 درصد باقی می گذارد.

از آنجایی که مبدا تبدیل برای نوار پیشرفت ما فقط مربوط به انتقال مبدا به سمت چپ است، مقدار 50% برای مقدار محور Y غیر ضروری است. بیایید مقدار Y آن را حذف کنیم، که به واضح تر شدن کد کمک می کند و نشان می دهد که ما فقط نگران محور X هستیم:

اکنون کد ما پاک‌تر است و همچنان دقیقاً همان کار را در مرورگر انجام می‌دهد:

اما اگر به جای یک مقدار عددی، یک کلمه کلیدی را به transform-origin اختصاص دهیم، مرورگر متوجه می‌شود که آن را روی کدام محور اعمال کند و محور دیگر را در حالت پیش‌فرض قرار دهد.

استفاده از کلمه کلیدی سمت چپ حتی واضح تر از بیان 0% برای مقدار مبدا تبدیل است. فوراً به شما می گوید که مبدا تبدیل را به لبه سمت چپ منتقل کرده اید. بیایید برای آخرین بار به نوار پیشرفت خود برگردیم و مقدار transform-origin را با کلمه کلیدی سمت چپ جایگزین کنیم تا کد ما تا حد امکان واضح و مختصر باشد:

وقتی دو بعد کافی نیست

می توانید از توابع ویژگی transform برای دستکاری عناصر در دو بعد یا سه بعدی استفاده کنید. تنظیم مبدا تبدیل با مقادیر X و Y برای تبدیل‌های دوبعدی عالی عمل می‌کند، اما تغییر مبدا برای تبدیل‌های سه بعدی چطور؟

شما آن را حدس زدید!😎 شما یک مقدار سوم را به لیست اضافه می کنید. می‌توانید مقادیر X و Y را دقیقاً به همان اندازه که منشأ دو بعدی است، با استفاده از درصد یا کلمات کلیدی اختصاص دهید، اما محور Z باید با استفاده از واحدهای واقعی مانند پیکسل‌ها، CM و غیره تعریف شود.

شما می توانید توابع تبدیل سه بعدی را با مقادیر مبدا تبدیل سه بعدی برای ایجاد اشیاء سه بعدی مانند دکمه های چند وجهی ترکیب کنید!

بیایید خلاصه کنیم!

transform-origin به شما امکان می دهد نقطه لنگر را از مرکز پیش فرض عنصر تغییر دهید.

می توانید مبدا را با استفاده از واحدهای واقعی مانند px یا rem تنظیم کنید.

همچنین می توانید از درصد برای X و Y استفاده کنید.

یا از کلمات کلیدی استفاده کنید: چپ و راست برای محور X، بالا و پایین برای محور Y و مرکز برای یا/یا.

هنگام تغییر مبدا در فضای سه بعدی، مقدار Z باید یک واحد واقعی (نه درصد) باشد!