عناصر را با ویژگی های translate
، rotate
و scale
تبدیل کنید
ویژگی transform
CSS
برای اعمال تبدیل به یک عنصر، از ویژگی transform
CSS استفاده کنید. ویژگی یک یا چند <transform-function>
را می پذیرد که یکی پس از دیگری اعمال می شوند.
.target {
transform: translateX(50%) rotate(30deg) scale(1.2);
}
عنصر هدف 50% در محور X ترجمه می شود، 30 درجه می چرخد و در نهایت تا 120% مقیاس می شود.
در حالی که ویژگی transform
کار خود را به خوبی انجام می دهد، زمانی که بخواهید هر یک از این مقادیر را به صورت جداگانه تغییر دهید، کمی خسته کننده می شود.
برای تغییر مقیاس در شناور، باید همه توابع را در ویژگی transform کپی کنید، حتی اگر مقادیر آنها بدون تغییر باقی بماند.
.target:hover {
transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}
خصوصیات تبدیل فردی
ارسال با Chrome 104 ویژگیهای منحصر به فردی برای تبدیلهای CSS است. ویژگیها scale
، rotate
و translate
هستند که میتوانید از آنها برای تعریف جداگانه آن بخشهای یک تبدیل استفاده کنید.
با انجام این کار، کروم به فایرفاکس و سافاری می پیوندد که قبلاً از این ویژگی ها پشتیبانی می کنند.
با بازنویسی مثال transform
قبلی با خصوصیات فردی، قطعه شما به این شکل می شود:
.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
سفارش مهم است
یکی از تفاوت های کلیدی بین ویژگی transform
اصلی CSS و ویژگی های جدید، ترتیب اعمال تبدیل های اعلام شده است.
با transform
، توابع تبدیل به ترتیبی که نوشته شده اند اعمال می شوند – از چپ (خارج) به راست (داخل).
با ویژگیهای تبدیل فردی، ترتیب به ترتیبی نیست که آنها اعلام میشوند. ترتیب همیشه یکسان است: ابتدا translate
(خارج)، سپس rotate
، و سپس scale
(در داخل).
این بدان معناست که هر دو قطعه کد زیر نتیجه یکسانی دارند:
.transform--individual {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
.transform--individual-alt {
rotate: 30deg;
translate: 50% 0;
scale: 1.2;
}
در هر دو مورد، عناصر هدف ابتدا 50%
در محور X ترجمه می شوند، سپس 30deg
می چرخند و در نهایت با 1.2
مقیاس می شوند.
اگر یکی از ویژگیهای تبدیل منفرد به همراه یک ویژگی transform
اعلام شود، آنگاه تبدیلهای منفرد ابتدا اعمال میشوند ( translate
، rotate
، و سپس scale
) با transform
آخر (در داخل). جزئیات بیشتر در مشخصاتی است که نحوه محاسبه ماتریس تبدیل را مشخص می کند.
انیمیشن ها
دلیل اصلی اضافه شدن این ویژگی ها آسان کردن انیمیشن ها است. فرض کنید می خواهید یک عنصر را به صورت زیر متحرک کنید:
استفاده از transform
برای پیاده سازی این انیمیشن با استفاده از transform
، باید تمام مقادیر بینابینی را برای همه تبدیل های تعریف شده محاسبه کنید و آن ها را در هر فریم کلیدی قرار دهید. به عنوان مثال، برای انجام یک چرخش در علامت 10٪، مقادیر سایر تبدیل ها نیز باید محاسبه شوند، زیرا ویژگی transform
به همه آنها نیاز دارد.
کد CSS حاصل به این صورت می شود:
@keyframes anim {
0% { transform: translateX(0%); }
5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
100% { transform: translateX(100%) rotate(360deg); }
}
.target {
animation: anim 2s;
animation-fill-mode: forwards;
}
استفاده از خصوصیات تبدیل فردی
با ویژگی های تبدیل فردی، نوشتن این امر بسیار آسان تر می شود. به جای کشیدن تمام تبدیل ها از فریم کلیدی به فریم کلیدی، می توانید هر تبدیل را به صورت جداگانه هدف قرار دهید. همچنین دیگر نیازی به محاسبه تمام آن مقادیر بینابینی ندارید.
@keyframes anim {
0% { translate: 0% 0; }
100% { translate: 100% 0; }
0%, 100% { scale: 1; }
5%, 95% { scale: 1.2; }
0% { rotate: 0deg; }
10%, 90% { rotate: 180deg; }
100% { rotate: 360deg; }
}
.target {
animation: anim 2s;
animation-fill-mode: forwards;
}
استفاده از خصوصیات تبدیل فردی و چندین فریم کلیدی
برای اینکه کد خود را ماژولار کنید، می توانید هر زیر انیمیشن را به مجموعه ای از فریم های کلیدی خود تقسیم کنید.
@keyframes move {
0% { translate: 0% 0; }
100% { translate: 100% 0; }
}
@keyframes scale {
0%, 100% { scale: 1; }
5%, 95% { scale: 1.2; }
}
@keyframes rotate {
0% { rotate: 0deg; }
10%, 90% { rotate: 180deg; }
100% { rotate: 360deg; }
}
.target {
animation: move 2s, scale 2s, rotate 2s;
animation-fill-mode: forwards;
}
به لطف این تقسیم، می توانید هر مجموعه جداگانه ای از فریم های کلیدی را به دلخواه اعمال کنید زیرا ویژگی های transform
- که اکنون به ویژگی های جداگانه تبدیل شده اند - دیگر روی یکدیگر بازنویسی نمی کنند. بالاتر از آن، میتوانید بدون نیاز به بازنویسی کل قسمت، زمانبندی متفاوتی برای هر تغییر ایجاد کنید.
عملکرد
انیمیشنهایی که از این ویژگیهای جدید استفاده میکنند به اندازه انیمیشنهای ویژگی transform
موجود کارآمد هستند.
انیمیشن های translate
، rotate
و scale
بر روی کامپوزیتور به همان شیوه ای اجرا می شوند که انیمیشن های transform
انجام می دهند، بنابراین آنها برای اجرای انیمیشن به همان شیوه transform
خوب هستند .
این ویژگیهای جدید با ویژگی will-change
نیز کار میکنند. به طور کلی، بهتر است از استفاده بیش از حد از will-change
با استفاده از آن بر روی حداقل تعداد عناصر مورد نیاز، و تا حد امکان کوتاه مدت، اجتناب کنید. اما این نیز خوب است که تا حد امکان خاص باشید. برای مثال، اگر will-change
برای بهینهسازی یک انیمیشن با ویژگیهای rotate
و filter
استفاده میکنید، باید این را با استفاده will-change: rotate, filter
. این کمی بهتر از استفاده از will-change: transform, filter
در موردی که در حال انیمیشن کردن rotate
و filter
هستید، زیرا برخی از ساختارهای داده ای که Chrome از قبل هنگام استفاده will-change
ایجاد می کند، برای transform
در مقابل rotate
متفاوت است.
بخشی از سری جدید قابلیت همکاری