Ayrı dönüşüm özellikleriyle CSS dönüşümleri üzerinde daha ayrıntılı kontrol

translate, rotate ve scale özellikleriyle öğeleri dönüştürme

Bramus

L. David Baron

CSS transform özelliği

Bir öğeye dönüştürme işlemi uygulamak için CSS transform Mülkünü kullanın. Mülk, birbiri ardına uygulanan bir veya daha fazla <transform-function> kabul eder.

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

Hedeflenen öğe, X ekseni üzerinde% 50 kaydırılır, 30 derece döndürülür ve son olarak %120'ye kadar ölçeklendirilir.

transform mülkü işini gayet iyi yapsa da bu değerlerden herhangi birini tek tek değiştirmek biraz can sıkıcı olabilir.

Fareyle üzerine geldiğinizde ölçeği değiştirmek için, değerleri değişmese bile dönüştürme mülkünde tüm işlevleri kopyalamanız gerekir.

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

Bağımsız dönüşüm özellikleri

Chrome 104 ile birlikte gönderilen CSS dönüşümleri için bağımsız özelliklerdir. scale, rotate ve translate özellikleri, dönüşümün bu bölümlerini ayrı ayrı tanımlamak için kullanabileceğiniz özelliklerdir.

Böylece Chrome, bu özellikleri zaten destekleyen Firefox ve Safari'ye katılmış oldu.

Önceki transform örneğini ayrı mülklerle yeniden yazarsanız snippet'iniz şu şekilde olur:

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

Siparişle ilgili konular

Orijinal CSS transform mülkü ile yeni mülkler arasındaki önemli farklardan biri, beyan edilen dönüşümlerin uygulanma sırasıdır.

transform ile dönüşüm işlevleri yazıldıkları sırada (soldan (dışarıdan) sağa (içere)) uygulanır.

Tek tek dönüşüm özellikleri için sıra, bunların tanımlandığı sıra değildir. Sıralama her zaman aynıdır: önce translate (dış), ardından rotate ve scale (iç).

Yani aşağıdaki kod snippet'lerinin ikisi de aynı sonucu verir:

.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 önce X ekseninde 50% kadar, ardından 30deg kadar döndürülür ve son olarak 1.2 kadar ölçeklendirilir.

Bireysel dönüştürme özelliklerinden biri bir transform mülküyle birlikte bildirilirse bireysel dönüştürmeler önce (translate, rotate ve ardından scale) uygulanır ve transform en son (içte) uygulanır. Dönüşüm matrisinin nasıl hesaplanması gerektiğini tanımlayan spesifikasyonda daha fazla bilgi bulabilirsiniz.

Animasyonlar

Bu özelliklerin eklenmesinin asıl nedeni, animasyon oluşturmayı kolaylaştırmaktır. Bir öğeyi aşağıdaki gibi canlandırmak istediğinizi varsayalım:

transform kullanılıyor

Bu animasyonu transform kullanarak uygulamak için, tanımlanan tüm dönüşümler için tüm ara değerleri hesaplamanız ve bunları her bir animasyon karesine eklemeniz gerekir. Örneğin, %10'da bir rotasyon yapmak için transform mülkünün hepsine ihtiyacı olduğu için diğer dönüşümlerin değerlerinin de hesaplanması gerekir.

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üştürme mülkleri sayesinde bu işlemin yazılması çok daha kolay hale gelir. Tüm dönüşümleri animasyon karesinden animasyon karesine sürüklemek yerine her dönüşümü tek tek hedefleyebilirsiniz. Artık bu ara değerler arasında kalan tüm değerleri hesaplamanıza da gerek yoktur.

@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üştürme özellikleri ve birkaç animasyon karesi kullanma

Kodunuzu modüler hale getirmek için her alt animasyonu kendi animasyon kareleri grubuna ayırabilirsiniz.

@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;
}

Artık ayrı mülkler haline gelen transform mülkleri artık birbirinin üzerine yazmadığı için bu bölme sayesinde her bir ayrı anahtar kare grubunu istediğiniz gibi uygulayabilirsiniz. Ayrıca, tümünü yeniden yazmak zorunda kalmadan her dönüşüme farklı bir zamanlama verebilirsiniz.

Performans

Bu yeni özellikleri kullanan animasyonlar, mevcut transform mülkünün animasyonlarıyla aynı düzeyde verimlidir.

translate, rotate ve scale animasyonlarının kompozisyonda çalışması, transform animasyonlarının çalışmasıyla aynı olduğundan, transform'ın yaptığı gibi animasyon performansı için iyidir.

Bu yeni özellikler will-change mülküyle de çalışır. Genel olarak, will-change öğesini gereken minimum sayıda öğede ve mümkün olduğunca kısa bir süre boyunca kullanarak aşırı kullanmaktan kaçınmanız önerilir. Ancak mümkün olduğunca ayrıntılı bilgi vermeniz de iyi olur. Örneğin, rotate ve filter özellikleriyle bir animasyonu optimize etmek için will-change kullanıyorsanız bunu will-change: rotate, filter kullanarak beyan etmeniz gerekir. Bu, will-change'ı kullandığınızda Chrome'un önceden oluşturduğu veri yapılarından bazıları transform için rotate'tan farklı olduğu için rotate ve filter'yi animasyonlu hale getirdiğiniz durumlarda will-change: transform, filter kullanmaktan biraz daha iyidir.

Yeniden birlikte çalışabilirlik serisi kapsamında