Bağımsız Dönüşüm Özellikleri

transform özelliği, birden fazla dönüşümü belirli bir sırayla uygulamanıza olanak tanır ancak tek bir dönüşümde yapılan değişiklikler, tüm dönüşüm zincirinin yeniden belirtilmesini gerektirir. Bu nedenle, tek bir dönüşümü canlandırmak veya geçiş yapmak zor olabilir.

Bağımsız CSS dönüştürme özellikleri (translate, rotate ve scale), dönüşümleri transform özelliğinden bağımsız olarak uygulamanıza olanak tanır. Bu yaklaşım, tek bir dönüşümü (ör. :hover üzerinde) geçersiz kılmayı kolaylaştırır.

Uygulamaya Koymayla İlgili Temel Ayrıntılar

Bağımsız dönüştürme özellikleri, CSS'nizdeki sıralarından bağımsız olarak her zaman sabit bir sırada uygulanır:

1. translate
2. rotate
3. scale
4. transform (en son uygulanan)

Farklı bir sıralama gerekiyorsa (ör. döndürmeden önce ölçeklendirme) transform özellik işlevlerini kullanmaya devam etmeniz gerekir.

Dönüşüm işlevleri, bağımsız dönüşüm özelliklerini geçersiz kılmaz. Başka bir deyişle, scale: 2; transform: scale(3); önce 2 kat, ardından 3 kat daha ölçeklenerek toplamda 6 kat ölçeklenir.

Yığınlama Bağlamlarında ve İçeren Bloklarda Beklenmedik Değişiklikleri Önleme

transform özelliği ve bağımsız dönüştürme özellikleri, sayfanın düzenini ve oluşturulmasını etkiler ve z-endeksi veya sabitleme konumuyla ilgili beklenmedik davranışlara neden olabilir. ZORUNLU: Bir öğeye :hover gibi bir durum değişikliği, geçiş veya animasyon kapsamında dönüşüm uygulanabiliyorsa temel öğeye kimlik dönüşümü uygulayın. Bu sayede, bir dönüşüm uygulandığında öğenin yığınlama bağlamı ve kapsayıcısı değişmez.

.element{
  /* MANDATORY: Apply identity transformations for properties that will
     change on state changes (like :hover). This prevents unexpected layout
     or z-index shifts caused by creating a new stacking context only on hover. */
  translate: 0px;
  rotate: 0deg;
  scale: 1;
}
.element:hover{
  translate: 10px 10px;
  rotate: 20deg;
  scale: 0.8;
}

Bağımsız Animasyon ve Geçişler

En önemli avantajı, farklı özellikleri hedefleyen çakışan animasyonları veya geçişleri çakışma olmadan tanımlayabilmesidir.

.card {
  /* Define independent animations that don't overwrite each other */
  animation: float 3s infinite ease-in-out;
  
  /* Transition only the scale property for hover states */
  transition: scale 0.3s ease;

  /* Establish the base scale to prevent a sudden stacking context shift when transitioning on hover. */
  scale: 1;
}

.card:hover {
  /* Only the scale changes; the 'float' animation (translate) continues uninterrupted */
  scale: 1.05;
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

Yedek stratejiler

Bağımsız dönüşüm özelliklerini desteklemeyen tarayıcılar için geleneksel transform özelliğini kullanın. Bir parçayı farklı bir durumda değiştirmek istiyorsanız tüm dönüşüm yığınını yeniden tanımlamanız gerektiğini unutmayın.

.element {
  /* Base transform */
  transform: translate(100px, 0) rotate(45deg);
  /* Specify the identity for the scale property. */
  scale: 1;
}

@supports not (translate: 0px) {
  .element:hover {
    /* Fallback: Must repeat translate and rotate even if only scale changes */
    transform: translate(100px, 0) rotate(45deg) scale(1.1);
  }
}

@supports (translate: 0px) {
  .element:hover {
    /* Modern: Only declare the change */
    scale: 1.1;
  }
}