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