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 ekseninde% 50 çevrilir, 30 derece döndürülür ve son olarak %120'ye kadar ölçeklendirilir.

transform özelliği sorunsuz çalışsa da bu değerlerden herhangi birini tek tek değiştirmek istediğinizde biraz yorucu 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.

Bunu yaptığınızda Chrome, bu özellikleri halihazırda destekleyen Firefox ve Safari'yi birleştirir.

Ö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, tanımlanan dönüşümlerin uygulanma sırasıdır.

transform kullanıldığında, dönüşüm işlevleri soldan (dış) sağa (içten) doğru yazıldığı sırayla 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.

Bağımsız dönüşüm özelliklerinden biri, transform özelliğiyle birlikte tanımlanırsa önce bağımsız dönüşümler (translate, rotate ve ardından scale) sonda transform ile (içerde) uygulanır. Dönüşüm matrisinin nasıl hesaplanması gerektiğini tanımlayan spesifikasyonda daha fazla ayrıntı bulabilirsiniz.

Animasyonlar

Bu özelliklerin eklenmesindeki temel amaç, 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 işaretinde bir rotasyon yapmak için diğer dönüşümlerin değerlerinin de hesaplanması gerekir, çü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;
}

Bağımsız dönüşüm özelliklerini kullanma

Bağımsız dönüşüm özellikleri sayesinde bunu yazmak ç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;
}

Bu bölme sayesinde her bir ayrı animasyon karesi grubunu istediğiniz gibi uygulayabilirsiniz. Çünkü transform özellikleri artık ayrı özellikler haline gelmiştir, artık birbirinin üzerine yazılmaz. 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 mülkler will-change mülküyle de çalışır. Genel olarak, will-change'ü 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 spesifik bir açıklama yapmak da işe yarar. Ö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, rotate ve filter'yi animasyonlu hale getirdiğiniz 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 bir kısmının transform ve rotate için farklı olmasıdır.

Yeniden birlikte çalışabilirlik serisi kapsamında