Çalıştırılabilir CSS Dokümanları: CSS transform

Q: CSS'te transform ne işe yarar?

Bir elementin nasıl çizildiğini değiştirir: taşınmış (translate), yeniden boyutlandırılmış (scale), döndürülmüş (rotate) ya da eğilmiş (skew). Element düzendeki orijinal yerini korur, bu yüzden çevresindeki elementler kıpırdamaz.

Q: CSS'te birden fazla transform nasıl uygulanır?

Onları tek bir transform değerinde boşlukla ayırarak listele: transform: translateX(50px) rotate(20deg) scale(1.2);. İkinci bir transform bildirimi yazmak ilkine eklenmez, onun yerini alır.

Q: transform span'imde neden çalışmıyor?

Transform'lar düz bir ya da gibi değiştirilmemiş satır içi elementlere uygulanmaz. Elemente display: inline-block ya da block ver, transform çalışır.

transform ne yapar

transform bir elementin nasıl çizildiğini değiştirir: taşınmış, ölçeklenmiş, döndürülmüş ya da eğilmiş. Aşağıdaki kesikli çerçeveler, her kutunun transform olmadan nerede olacağını gösteriyor:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform functions</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 40px; padding: 30px 20px; }
    .slot { outline: 2px dashed #9ca3af; width: 90px; height: 60px; }
    .box { width: 90px; height: 60px; background: #2563eb; color: white; display: grid; place-items: center; }
    .t1 { transform: translate(20px, 10px); }
    .t2 { transform: scale(1.3); background: #16a34a; }
    .t3 { transform: rotate(20deg); background: #f59e0b; color: #111827; }
    .t4 { transform: skewX(-20deg); background: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div class="slot"><div class="box t1">translate</div></div>
    <div class="slot"><div class="box t2">scale</div></div>
    <div class="slot"><div class="box t3">rotate</div></div>
    <div class="slot"><div class="box t4">skewX</div></div>
  </div>
</body>
</html>

translate(20px, 10px) mavi kutuyu 20px ileri ve 10px aşağı taşır. scale(1.3) yeşil olanı merkezi etrafında %30 büyütür. rotate(20deg) kehribar rengi olanı saat yönünde döndürür, skewX(-20deg) ise koyu olanı eğer. Her durumda kesikli yuva, yani elementin düzende kapladığı alan, tam olarak olduğu yerde kalır.

Transform fonksiyonları

Fonksiyon	Ne yapar	Örnek
`translate(x, y)`	taşır	`translate(20px, -10px)`, `translate(-50%, -50%)`
`translateX(x)` / `translateY(y)`	tek eksende taşır	`translateY(-4px)`
`scale(s)` / `scale(x, y)`	yeniden boyutlandırır (1 = orijinal, 0.5 = yarı, negatif aynalar)	`scale(1.1)`, `scale(-1, 1)`
`scaleX(s)` / `scaleY(s)`	tek eksende yeniden boyutlandırır	`scaleX(0.5)`
`rotate(angle)`	saat yönünde döndürür (negatif = saat yönünün tersine)	`rotate(45deg)`, `rotate(0.25turn)`
`skew(x, y)` / `skewX(a)` / `skewY(a)`	eğer	`skewX(-15deg)`
`matrix(a, b, c, d, e, f)`	yukarıdakilerin hepsi tek bir matriste, çoğunlukla tarayıcının geri bildirdiği şey
`none`	transform yok

translate() içindeki yüzdeler ebeveynin değil, elementin kendi boyutuna göredir. Döndürmenin dereceler, turlar ve dönmeyle birlikte kendi sayfası var: CSS döndürme.

Transform oyun alanı

Kaydırıcıları hareket ettir. İlk satır oluşturduğun transform değeri, ikincisi tarayıcının ondan hesapladığı matris; getComputedStyle her transform için bunu döndürür:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .controls { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 16px; }
    .stage { height: 170px; display: grid; place-items: center; background: #f3f4f6; margin: 10px 0; overflow: hidden; }
    #box { width: 80px; height: 80px; background: #2563eb; color: white; display: grid; place-items: center; border-radius: 6px; }
    code { display: block; }
  </style>
</head>
<body>
  <div class="controls">
    <label>translateX <input type="range" data-f="translateX" data-u="px" min="-120" max="120" value="0"></label>
    <label>scale <input type="range" data-f="scale" data-u="" min="0.5" max="1.8" step="0.1" value="1"></label>
    <label>rotate <input type="range" data-f="rotate" data-u="deg" min="-180" max="180" value="0"></label>
    <label>skewX <input type="range" data-f="skewX" data-u="deg" min="-40" max="40" value="0"></label>
  </div>
  <div class="stage"><div id="box">Box</div></div>
  <code id="value"></code>
  <code id="matrix"></code>
  <script>
    const box = document.getElementById('box');
    const inputs = document.querySelectorAll('input');
    const update = () => {
      const t = [...inputs].map((i) => i.dataset.f + '(' + i.value + i.dataset.u + ')').join(' ');
      box.style.transform = t;
      document.getElementById('value').textContent = 'transform: ' + t + ';';
      document.getElementById('matrix').textContent = 'computed: ' + getComputedStyle(box).transform;
    };
    inputs.forEach((i) => i.addEventListener('input', update));
    update();
  </script>
</body>
</html>

Transform'lar düzeni kaydırmaz

Transform uygulanmış bir element başka bir yere çizilir, ama sayfa transform uygulanmamış gibi yerleştirilir. Komşuları konumlarını korur. Transform'ları hover efektleri ve animasyon için iyi yapan budur: çevrelerindeki hiçbir şey yeniden yerleşmez.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>No reflow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 10px; padding: 24px 10px; }
    .row div { width: 80px; height: 50px; background: #e5e7eb; display: grid; place-items: center; }
    .row .grow-t { transform: scale(1.5); background: #16a34a; color: white; }
    .row .grow-w { width: 120px; height: 75px; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="row" id="a"><div>A</div><div class="grow-t">scale(1.5)</div><div id="c1">C</div></div>
  <div class="row" id="b"><div>A</div><div class="grow-w">width 120px</div><div id="c2">C</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'C starts at x = ' + document.getElementById('c1').offsetLeft + 'px next to the scaled box, and at x = ' +
      document.getElementById('c2').offsetLeft + 'px next to the resized one.';
  </script>
</body>
</html>

Ortadaki iki kutu da 1,5 kat büyük görünüyor. Ölçeklenen, komşularıyla çakışıyor ve C yerinde kalıyor; width ve height ile büyütülen ise C'yi 40px ileri itiyor.

Birden fazla transform ve sıraları

Birkaç fonksiyonu boşlukla ayırarak tek bir transform içine koy. Sıra sonucu değiştirir, çünkü soldan sağa okunduğunda her fonksiyon kendinden öncekilerin bıraktığı koordinat sisteminde çalışır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform order</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .stage { position: relative; height: 170px; background: #f3f4f6; }
    .box { position: absolute; top: 20px; left: 20px; width: 60px; height: 40px; opacity: 0.85; }
    .a { transform: translateX(120px) rotate(45deg); background: #2563eb; }
    .b { transform: rotate(45deg) translateX(120px); background: #16a34a; }
  </style>
</head>
<body>
  <div class="stage"><div class="box a"></div><div class="box b"></div></div>
  <p id="out"></p>
  <script>
    const center = (el) => { const r = el.getBoundingClientRect(); return Math.round(r.left + r.width / 2) + ', ' + Math.round(r.top + r.height / 2); };
    document.getElementById('out').textContent =
      'blue (translate then rotate) center: ' + center(document.querySelector('.a')) +
      '  |  green (rotate then translate) center: ' + center(document.querySelector('.b'));
  </script>
</body>
</html>

Mavi kutu 120px dümdüz ilerledi ve sonra yerinde döndürüldü. Yeşil kutu önce döndürüldü, bu yüzden "x ekseni" çapraz gösteriyor ve translateX(120px) onu köşegen boyunca aşağı taşıyor. Aynı fonksiyonlar, farklı yer.

Diğer tuzak: ikinci bir transform bildirimi ilkinin yerini alır. Bir kartta transform: rotate(-2deg) varsa ve hover kuralı transform: scale(1.05) diyorsa, hover'da döndürme kaybolur. İkisini de tekrarla (rotate(-2deg) scale(1.05)) ya da aşağıdaki ayrı özellikleri kullan.

transform-origin

Ölçekleme, döndürme ve eğme varsayılan olarak merkez olan sabit bir noktanın, transform origin'in etrafında gerçekleşir. Onu anahtar kelimelerle, uzunluklarla ya da yüzdelerle değiştir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transform-origin</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 50px; padding: 20px 30px 40px; }
    .slot { outline: 2px dashed #9ca3af; width: 80px; height: 50px; }
    .box { width: 80px; height: 50px; background: #2563eb; transform: rotate(25deg); }
    .tl { transform-origin: top left; }
    .br { transform-origin: bottom right; }
  </style>
</head>
<body>
  <div class="row">
    <div><code>center</code><div class="slot"><div class="box"></div></div></div>
    <div><code>top left</code><div class="slot"><div class="box tl"></div></div></div>
    <div><code>bottom right</code><div class="slot"><div class="box br"></div></div></div>
  </div>
</body>
</html>

Üç kutu da 25 derece dönüyor. İlki ortası üzerinde dönüyor, ikincisi sol üst köşesini yuvanın köşesine sabit tutuyor, üçüncüsü sağ alt köşesini. Butonundan büyüyerek açılan bir açılır menü scale() ile transform-origin: top kullanır.

translate, scale ve rotate özellikleri

Modern tarayıcılarda fonksiyonlarla aynı işi yapan ama bağımsız olarak ayarlanıp canlandırılabilen üç ayrı özellik de var:

.card {
  rotate: -2deg;
  transition: scale 0.2s ease-out;
}
.card:hover {
  scale: 1.05;   /* the rotation stays, because it is a different property */
}

Onları hangi sırada bildirirsen bildir, her zaman herhangi bir transform değerinin önünde transform: translate(...) rotate(...) scale(...) yazılmış gibi birleşirler. Söz dizimine dikkat et: translate: 10px 20px ve scale: 1.2 fonksiyon parantezleri olmadan değer alır.

translate(-50%, -50%) ile ortalamak

translate() yüzdeleri elementin kendi boyutuna göre olduğu için top: 50%; left: 50%; transform: translate(-50%, -50%), her boyuttaki absolute konumlu bir elementi ebeveyninde ortalar. Div ortalama sayfası bunu flexbox ve grid ile karşılaştırıyor.

Sık yapılan hatalar

İki transform bildirimi. Sonraki tamamen kazanır. Fonksiyonları birleştir ya da rotate, scale ve translate özelliklerini kullan.
Satır içi bir elemente transform uygulamak. Düz bir <span> ya da <a>, transform'u yok sayar. Onu inline-block yap.
Komşuların kaymasını beklemek. Transform'lar düzeni asla değiştirmez. Yer açmak için width, margin ya da gap değiştir.
Yanlış fonksiyon sırası. translate()'ten önce gelen rotate() döndürülmüş eksen boyunca taşır.
position: fixed çocuklarla sürprizler. Transform uygulanmış bir element, fixed konumlu torunları için kapsayıcı blok olur, bu yüzden içindeki sabit bir başlık onunla birlikte kayar. Ayrıca z-index için yeni bir stacking context oluşturur.

Sıkça Sorulan Sorular

CSS'te transform ne işe yarar?

Bir elementin nasıl çizildiğini değiştirir: taşınmış (translate), yeniden boyutlandırılmış (scale), döndürülmüş (rotate) ya da eğilmiş (skew). Element düzendeki orijinal yerini korur, bu yüzden çevresindeki elementler kıpırdamaz.

CSS'te birden fazla transform nasıl uygulanır?

Onları tek bir transform değerinde boşlukla ayırarak listele: transform: translateX(50px) rotate(20deg) scale(1.2);. İkinci bir transform bildirimi yazmak ilkine eklenmez, onun yerini alır.

transform fonksiyonlarının sırası önemli mi?

Evet. Soldan sağa okunduğunda her fonksiyon öncekilerin bıraktığı eksenlerde çalışır, bu yüzden rotate(45deg) translateX(100px) elementi döndürülmüş bir eksen boyunca taşır, translateX(100px) rotate(45deg) ise onu düz taşır ve sonra döndürür.

transform-origin nedir?

Ölçekleme, döndürme ve eğmenin etrafında gerçekleştiği sabit noktadır. Varsayılan merkezdir (50% 50%). transform-origin: top left bir elementin sol üst köşesinden büyümesini ya da onun etrafında dönmesini sağlar.

transform span'imde neden çalışmıyor?

Transform'lar düz bir <span> ya da <a> gibi değiştirilmemiş satır içi elementlere uygulanmaz. Elemente display: inline-block ya da block ver, transform çalışır.

İlgili kavramlar