CSS transform: translate, rotate, scale, skew ve 3B Dönüşümler

transform ne yapar, ne yapmaz?

MDN'ye göre dönüşümler öğenin içeriğinin şeklini ve konumunu, normal belge akışını bozmadan değiştirir. Döndürme, eğme, ölçekleme ve taşıma hem düzlemde hem 3B uzayda uygulanabilir. Bir öğeyi translate ile 100 piksel sağa kaydırdığınızda yanındaki öğeler yerinden oynamaz; margin ya da left ile kaydırmadan farkı budur.

Her öğe dönüştürülemez. MDN, kutu modeliyle yerleşen tüm öğelerin dönüştürülebildiğini, ancak üç istisna olduğunu belirtir: yerine konmayan (non-replaced) satır içi kutular, tablo sütunu kutuları ve tablo sütun grubu kutuları. Pratikte en sık karşılaşılan durum ilkidir: Düz bir span ya da a öğesine rotate verdiğinizde hiçbir şey olmaz. Öğeye display: inline-block vermek bu sorunu çözer.

transform değeri none dışında bir şey olduğunda iki önemli yan etki ortaya çıkar. Birincisi öğe yeni bir yığın bağlamı (stacking context) oluşturur; bu da içindeki öğelerin z-index değerlerinin artık yalnızca bu öğenin içinde karşılaştırılması demektir. İkincisi öğe, içindeki position: fixed ve position: absolute öğeler için kapsayıcı blok (containing block) olur. "Sabit menüm görünüm alanına değil bir kutuya yapıştı" şikâyetinin yaygın nedenlerinden biri, bir üst öğedeki dönüşümdür. Bu konular z-index ve stacking context ile position yazılarında ayrıntılı işleniyor.

Dönüşüm fonksiyonları

transform özelliği none ya da boşlukla ayrılmış bir veya daha fazla dönüşüm fonksiyonu alır. Fonksiyonlar beş grupta toplanır:

.kutu {
  transform: translate(30px, 20px) rotate(20deg);
  /* sonuç: 30px sağa, 20px aşağı taşınır ve 20 derece döner */
}

.yatay-esnet {
  transform: scale(2, 0.5);
  /* yatayda 2 kat, dikeyde yarıya */
}

.egik {
  transform: skewX(10deg) translateX(150px);
}

Açı değerleri deg, turn ya da rad gibi açı birimleriyle yazılır: rotate(0.5turn) yarım tur, yani 180 derecedir. rotate() için yön yazı yönüne bağlıdır: Soldan sağa yazılan bir bağlamda pozitif açı saat yönünde, negatif açı saat yönünün tersine döndürür; sağdan sola bağlamda bu tersine çevrilir. skew(ax, ay) fonksiyonunda ikinci açı yazılmazsa 0 kabul edilir ve yalnızca yatay eğme yapılır.

Koordinat sistemi de bilinmesi gereken bir ayrıntıdır. MDN'ye göre CSS'te başlangıç noktası (0, 0) öğenin sol üst köşesidir; pozitif x sağa, pozitif y aşağıya doğrudur. Bu yüzden translateY(20px) öğeyi aşağı, translateY(-20px) yukarı taşır. Okul matematiğindeki yukarı doğru pozitif y ekseni alışkanlığı burada ters çalışır.

Fonksiyon sırası sonucu değiştirir

Dönüşüm fonksiyonları soldan sağa birleştirilir ve her fonksiyon bir sonraki için yeni bir koordinat uzayı kurar. Bu yüzden aynı fonksiyonları farklı sırada yazmak farklı sonuç verir. MDN aynı durumu iki biçimde anlatır: Koordinat uzayının değiştiği açıdan bakarsanız fonksiyonlar yazıldığı sırayla uygulanır; ebeveynin koordinat uzayını sabit tutarak bakarsanız aynı sonuç fonksiyonların sağdan sola uygulanmasıyla elde edilir.

.bir {
  transform: translateX(200px) rotate(135deg);
  /* önce 200px sağa, sonra kaydırılmış uzayda 135 derece döner:
     öğe eski yerinin sağında, dönmüş olarak durur */
}

.iki {
  transform: rotate(135deg) translateX(200px);
  /* önce uzay 135 derece döner, sonra öğe DÖNMÜŞ x ekseni boyunca
     200px ilerler: sağa değil, sol aşağı yönde gider */
}

İkinci örnekte taşıma, dönmüş eksen üzerinde gerçekleştiği için öğe beklenen yerin çok uzağında görünür. Bir öğeyi hem taşıyıp hem döndürüyorsanız ve kendi yerinde dönmesini istiyorsanız taşımayı önce yazmak genellikle istenen sonucu verir. Sırayı hatırlamak zorunda kalmamak ise ayrı dönüşüm özelliklerinin varlık nedenidir.

Ayrı translate, rotate ve scale özellikleri

translate, rotate ve scale özellikleri, aynı adlı fonksiyonların işini transform özelliğinden bağımsız olarak yapar. MDN bunların tipik arayüz kullanımına daha iyi uyduğunu ve fonksiyon sırasını ezberleme gereğini ortadan kaldırdığını belirtir. Tarayıcı bunları her zaman sabit bir sırayla uygular: önce translate, sonra rotate, sonra scale ve en son transform.

Dikkat edilmesi gereken bir fark var: Ayrı özelliklerde değerler virgülsüz, boşlukla yazılır; fonksiyonlarda virgül kullanılır. scale için 1 ya da yüzde 100'den büyük değerler büyütür, küçük değerler küçültür. MDN ayrıca dönüşüm fonksiyonlarının yalnızca transform özelliğinde kullanıldığını, ayrı özelliklerin içine fonksiyon yazılamayacağını not eder; rotate: rotate(45deg) geçersizdir.

Ayrı özelliklerin en büyük pratik yararı birbirini ezmemeleridir. Bir kartın hover durumunda büyümesini, bir animasyonun da onu yukarı aşağı sallamasını istediğinizi düşünün. İkisini de transform ile yazarsanız sonraki kural öncekinin yerine geçer ve bir hareket kaybolur. Ayrı özelliklerle her biri kendi işini yapar:

.kart {
  transition: scale 0.3s;
  animation: 2s ease-in-out infinite alternate salla;
}

.kart:hover {
  scale: 1.05;
  /* animasyondaki translate ile çakışmaz */
}

@keyframes salla {
  from {
    translate: 0 0;
  }
  to {
    translate: 0 -8px;
  }
}

Yüzde değerler neye göre hesaplanır?

translate() içindeki yüzde değerler, öğenin ebeveynine değil kendi referans kutusuna göre hesaplanır. Referans kutusunu transform-box özelliği belirler (content-box, border-box, fill-box, stroke-box, view-box). İlk yüzde kutunun genişliğine, ikinci yüzde yüksekliğine göredir. Bu, margin ve left gibi özelliklerdeki yüzdelerden temelden farklıdır; onlar kapsayıcı bloğa göre çözülür.

Adım adım bir örnek: Referans kutusu 200 piksel genişliğinde ve 100 piksel yüksekliğinde olan bir öğeye translate(-50%, -50%) verelim. Yatay kayma 200 x (-0,5) = -100 piksel, dikey kayma 100 x (-0,5) = -50 piksel olur. Öğe 100 piksel sola ve 50 piksel yukarı gider. Kutu 300 x 80 piksel olsaydı aynı değer 150 piksel sola ve 40 piksel yukarı taşırdı. Bir öğenin sol üst köşesini bir noktaya yerleştirip sonra kendi boyutunun yarısı kadar geri çekerek onu o noktaya ortalama tekniği bu davranışa dayanır; ortalama yöntemlerinin hepsi CSS ortalama yöntemleri yazısında karşılaştırılıyor.

.kaplama {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  /* sol üst köşe kapsayıcının ortasına gelir,
     sonra öğe kendi boyutunun yarısı kadar geri çekilir */
}

transform-origin: dönüşün merkezi

Döndürme, ölçekleme ve eğme gibi dönüşümler bir merkez noktasına göre yapılır. Bu nokta varsayılan olarak öğenin merkezidir (center) ve transform-origin ile değiştirilir. Bir, iki ya da üç değer alır: Tek uzunluk ya da yüzde yatay konumu belirtir; iki değer yatay ve dikey konumu verir; üçüncü değer z eksenindeki konumdur ve yalnızca uzunluk olabilir, yüzde yazmak bildirimi geçersiz kılar.

.ibre {
  transform-origin: bottom center;
  rotate: 45deg;
  /* sonuç: alt kenarın ortası etrafında döner, saat ibresi gibi */
}

.kapak {
  transform-origin: left;
  rotate: y -30deg;
  /* sol kenar menteşe gibi davranır */
}

MDN, transform-origin özelliğinin aslında diğer dönüşümlerin etrafına bir çift taşıma eklemek gibi çalıştığını açıklar: Önce merkez gerçek başlangıç noktasına taşınır, dönüşüm uygulanır, sonra merkez geri taşınır. Ayrıca bir istisnayı not eder: SVG öğelerinin çoğunda başlangıç değeri 0 0 olur; kök svg öğesi ve foreignObject içindeki doğrudan svg çocukları ise diğer CSS öğeleri gibi 50% 50% kullanır. SVG içindeki bir şekli kendi merkezinde döndürmek için MDN örneğinde transform-box: fill-box kullanılır.

3B dönüşümler: perspective, transform-style ve backface-visibility

MDN'ye göre 3B dönüşümlerde önce bir perspektif vererek 3B uzayı kurmanız, sonra 2B öğelerin bu uzayda nasıl davranacağını ayarlamanız gerekir. Üçüncü boyut izlenimini veren perspektiftir: Öğe izleyiciden uzaklaştıkça küçülür. perspective özelliği kullanıcı ile z=0 düzlemi arasındaki uzaklığı belirler ve uygulandığı öğenin çocuklarına etki eder. Değer küçüldükçe etki güçlenir, büyüdükçe zayıflar. Negatif değer sözdizimi hatasıdır; 1 pikselden küçük değerler 1 piksele yuvarlanır. Kaybolma noktası varsayılan olarak öğenin merkezindedir ve perspective-origin ile taşınır.

MDN'ye göre z değeri sıfırdan büyük olan öğeler büyür, küçük olanlar küçülür; z koordinatı perspektif değerinden büyük olan, yani kullanıcının "arkasında" kalan kısımlar hiç çizilmez. perspective özelliği de none dışında bir değer aldığında yeni bir yığın bağlamı oluşturur ve position: fixed öğeler için kapsayıcı blok olur.

.sahne {
  perspective: 500px;
}

.kup {
  transform-style: preserve-3d;
}

.on {
  transform: translateZ(50px);
}

.arka {
  transform: rotateY(180deg) translateZ(50px);
}

.sag {
  transform: rotateY(90deg) translateZ(50px);
}
/* sonuç: 100px kenarlı bir küpün yüzleri 3B uzayda yerleşir */

Bu kod MDN rehberindeki küp örneğinin kısaltılmış halidir. Her yüz önce kendi ekseninde döndürülür, sonra dönmüş z ekseni boyunca 50 piksel dışarı itilir. Fonksiyon sırasının önemi burada da görülür: Önce döndürüp sonra iterek her yüzü farklı bir yöne taşırsınız.

transform-style çocukların 3B uzayda mı yerleşeceğini (preserve-3d) yoksa ebeveynin düzlemine mi yassılacağını (flat) belirler. MDN iki tuzağa dikkat çeker. Birincisi özellik kalıtılmaz, bu yüzden iç içe 3B yapılarda yaprak olmayan her ara öğeye ayrıca yazılmalıdır. İkincisi bazı değerler tarayıcıyı içeriği yassılaştırmaya zorlar ve preserve-3d yazsanız bile kullanılan değer flat olur: visible ya da clip dışında bir overflow, 1'den küçük opacity, none dışında bir filter ya da clip-path, isolation: isolate, normal dışında bir mix-blend-mode ve boyama sınırlaması (paint containment) oluşturan contain değerleri bunlardandır.

backface-visibility bir öğenin arka yüzünün, yani ön yüzünün ayna görüntüsünün, kullanıcıya döndüğünde görünüp görünmeyeceğini belirler. hidden değeri öğeyi arkası dönükken görünmez yapar; çevrilen kart efektlerinde ön ve arka yüzün aynı anda görünmesini bu özellik engeller. MDN, özelliğin 2B dönüşümlerde hiçbir etkisi olmadığını belirtir, çünkü 2B dönüşümlerde perspektif yoktur.

Erişilebilirlik ve performans

MDN, ölçekleme ve yakınlaştırma animasyonlarının bazı migren türleri için yaygın bir tetikleyici olduğunu belirtir ve kullanıcıya animasyonları tercihen site genelinde kapatabileceği bir kontrol sunulmasını önerir. Ayrıca prefers-reduced-motion medya özelliğiyle hareket azaltma tercihini algılayıp bu animasyonları kapatmayı tavsiye eder. Performans tarafında ise MDN'nin animasyon sayfası, kutu modeli özelliklerini canlandırmanın yeniden yerleşime ve yeniden boyamaya yol açtığını, bunun yerine transform özelliğinin canlandırılmasını önerir.

.buyuyen:hover {
  scale: 1.1;
  transition: scale 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .buyuyen:hover {
    scale: none;
    outline: 2px solid currentcolor;
    /* hareket yerine çerçeveyle geri bildirim */
  }
}

Sık yapılan hatalar

• Satır içi öğeyi dönüştürmeye çalışmak: Düz span ve a öğeleri dönüşümden etkilenmez; inline-block verin.
• İki kuralda iki transform yazmak: Sonraki transform öncekinin yerine geçer; fonksiyonlar birleşmez. Ayrı özellikleri kullanın ya da tüm fonksiyonları tek listede yazın.
• Sırayı yanlış kurmak: rotate() translateX() ile translateX() rotate() farklı yerlere götürür.
• Fixed öğenin kaçması: Bir üst öğedeki transform ya da perspective, içerideki fixed öğenin kapsayıcı bloğu olur.
• 3B efekt düz görünüyor: Ebeveynde perspective yoksa ya da overflow: hidden veya opacity gibi bir değer preserve-3d etkisini yassılaştırıyorsa 3B görünüm kaybolur.
• Ayrı özelliğe fonksiyon yazmak: scale: scale(2) geçersizdir; scale: 2 yazın.

Sık Sorulan Sorular

transform öğenin kapladığı alanı değiştirir mi?

Hayır. Dönüşüm normal belge akışını bozmaz; öğenin yerleşimdeki yeri değişmeden kalır ve komşuları kaymaz. Yalnızca görsel çizim değişir. Büyütülen bir öğe bu yüzden komşularının üzerine taşabilir.

transform: rotate() mi, rotate özelliği mi kullanmalıyım?

İkisi de geçerlidir. Tek bir dönüşüm için fark yoktur; birden fazla dönüşümü farklı kurallardan ya da animasyonlardan yönetiyorsanız ayrı özellikler birbirini ezmediği için daha rahattır. Tarayıcı desteği için MDN sayfasındaki uyumluluk tablosuna bakın.

Dönüşüm z-index sıralamasını neden bozdu?

none dışındaki her transform değeri yeni bir yığın bağlamı oluşturur. Öğenin içindeki çocukların z-index değerleri artık yalnızca bu bağlam içinde karşılaştırılır ve dışarıdaki öğelerle yarışamaz.

Görsel efektler için transform yerine filter kullanılabilir mi?

İkisi farklı işler yapar: transform geometriyi, filter ise renk, bulanıklık ve gölge gibi görsel işlemeyi değiştirir. Birlikte kullanılabilirler.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: CSS öğrenme rehberi · CSS transition · CSS animation · z-index ve stacking context · position ve containing block · CSS ortalama yöntemleri · filter ve backdrop-filter