translate, rotate ve scale özellikleriyle öğeleri dönüştürme
CSS transform özelliği
Bir öğeye dönüşüm uygulamak için CSS transform Özelliğini kullanın. Tesis, art arda uygulanan bir veya daha fazla <transform-function> kabul eder.
.target {
transform: translateX(50%) rotate(30deg) scale(1.2);
}
Hedeflenen öğe, X ekseninde% 50 oranında çevrilir, 30 derece döndürülür ve son olarak %120'ye kadar ölçeklenir.
transform özelliği gerektiği gibi çalışıyor olsa da bu değerlerden herhangi birini tek tek değiştirmek istediğinizde biraz yorucu olabilir.
Fareyle üzerine gelindiğinde ölçeği değiştirmek için değerleri değişmese bile dönüşüm özelliğindeki tüm işlevleri çoğaltmanız gerekir.
.target:hover {
transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}
Ayrı dönüşüm özellikleri
Chrome 104 ile gönderim, CSS dönüşümleri için ayrı özelliklerdir. Dönüşümün bu bölümlerini ayrı ayrı tanımlamak için kullanabileceğiniz scale, rotate ve translate özellikleridir.
Böylece Chrome, bu özellikleri zaten destekleyen Firefox ve Safari'ye katılmıştır.
Önceki transform örneğini bağımsız özelliklerle yeniden yazdığınızda snippet'iniz şu hale gelir:
.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
Sıra önemlidir
Orijinal CSS transform özelliği ile yeni özellikler arasındaki temel farklardan biri, bildirilen dönüşümlerin uygulanma sırasıdır.
transform ile dönüşüm işlevleri yazılma sırasına göre soldan (dış) sağa (içe) doğru uygulanır.
Bağımsız dönüşüm özelliklerinde, bunların bildirildiği sıra sıra değildir. Sıralama her zaman aynıdır: ilk translate (dışarı), ardından rotate ve ardından scale (iç).
Bu, aşağıdaki kod snippet'lerinin ikisinin de aynı sonucu verdiği anlamına gelir:
.transform--individual {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
.transform--individual-alt {
rotate: 30deg;
translate: 50% 0;
scale: 1.2;
}
Her iki durumda da, hedeflenen öğeler ilk olarak X ekseninde 50% tarafından çevrilir, ardından 30deg tarafından döndürülür ve son olarak 1.2 ile ölçeklendirilir.
Bağımsız dönüşüm özelliklerinden biri transform özelliğiyle birlikte bildirilirse önce bağımsız dönüşümler (translate, rotate ve ardından scale) son olarak transform özelliği ile (içeride) uygulanır. Dönüşüm matrisinin nasıl hesaplanması gerektiğini tanımlayan spesifikasyonda daha fazla bilgi bulabilirsiniz.
Animasyonlar
Bu özelliklerin eklenmesinin temel nedeni animasyonları kolaylaştırmaktır. Bir öğeyi aşağıdaki gibi canlandırmak istediğinizi düşünelim:
transform kullanılıyor
Bu animasyonu transform kullanarak uygulamak için tanımlanan tüm dönüşümlerin aradaki tüm değerlerini hesaplamanız ve bunları her animasyon karesine eklemeniz gerekir. Örneğin, %10 işaretinde bir rotasyon yapmak için diğer dönüşümlerin değerleri de hesaplanmalıdır, çünkü transform özelliği bunların tümüne ihtiyaç duyar.
Elde edilen CSS kodu şu şekilde olur:
@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;
}
Ayrı dönüşüm özelliklerini kullanma
Ayrı dönüşüm özellikleri sayesinde bu işlevi yazmak çok daha kolay hale gelir. Tüm dönüşümleri animasyon karesinden animasyon karesine sürüklemek yerine, her dönüşümü ayrı ayrı hedefleyebilirsiniz. Ayrıca, aradaki değerlerin tümünü hesaplamanıza da gerek kalmaz.
@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;
}
Bağımsız dönüşüm özelliklerini ve birkaç animasyon karesini kullanma
Kodunuzu modüler hale getirmek için her bir alt animasyonu kendi animasyon kareleri kümesine bölebilirsiniz.
@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;
}
Bu ayırma sayesinde her bir ayrı animasyon karesi grubunu istediğiniz gibi uygulayabilirsiniz. Çünkü artık ayrı özellikler haline gelen transform özellikleri artık birbirinin üzerine yazmıyor. Bunun üzerinde, her şeyi yeniden yazmaya gerek kalmadan her dönüşüme farklı bir zamanlama verebilirsiniz.
Performans
Bu yeni özellikleri kullanan animasyonlar, mevcut transform özelliğinin animasyonları kadar etkilidir.
translate, rotate ve scale animasyonları, birleştiricide transform animasyonlarıyla aynı şekilde çalışır. Bu nedenle animasyon performansı için transform ile aynı şekilde iyi bir performans sağlarlar.
Bu yeni özellikler will-change mülküyle de çalışır. Genel olarak, will-change öğesini gereken minimum sayıda öğe ile ve makul olarak mümkün olduğunca kısa süre kullanarak aşırı kullanımdan kaçınmak en iyisidir. Ancak mümkün olduğunca ayrıntı vermeye de dikkat etmelisiniz. Örneğin, rotate ve filter özellikleriyle bir animasyonu optimize etmek için will-change kullanıyorsanız bunu will-change: rotate, filter kullanarak bildirmeniz gerekir. Bu, rotate ve filter animasyonlarını kullandığınız durumlarda will-change: transform, filter kullanmaktan biraz daha iyidir. Bunun nedeni, will-change kullandığınızda Chrome'un önceden oluşturduğu veri yapılarının bazıları transform ve rotate için farklı olmasıdır.
Yeni birlikte çalışabilirlik serisinin kapsamında