Çalıştırılabilir CSS Dokümanları: Döndürme (rotate)

Q: CSS'te bir element nasıl döndürülür?

transform: rotate(45deg); ya da ayrı özellik olan rotate: 45deg; kullan. Pozitif açılar saat yönünde, negatif açılar saat yönünün tersine döndürür; transform-origin'i değiştirmedikçe elementin merkezi etrafında.

Q: transform: rotate() ile rotate özelliği arasındaki fark nedir?

Aynı sonucu çizerler. rotate özelliği transform'dan bağımsızdır, bu yüzden bir hover kuralı döndürmeyi kaldırmadan scale ya da translate'i değiştirebilir ve her birinin kendi transition'ı olabilir. Birlikte, hangi sırada bildirirsen bildir transform: translate() rotate() scale() gibi davranırlar.

Q: CSS'te bir resim 90 derece nasıl döndürülür?

img'ye transform: rotate(90deg); (ya da rotate: 90deg;) ekle. Resim düzendeki orijinal yerini korur, bu yüzden yatay hale döndürülmüş uzun bir resim komşularıyla çakışabilir; kapsayıcısına döndürülmüş boyut için yer ver.

Q: CSS'te bir element nasıl döndürülerek sürekli çevrilir?

@keyframes spin { to { rotate: 360deg; } } tanımla ve animation: spin 1s linear infinite; uygula. Hız sabit kalsın diye linear kullan ve prefers-reduced-motion: reduce altında yavaşlat ya da durdur.

Q: CSS'te metin dikey olarak nasıl döndürülür?

Dikey bir etiket için writing-mode: vertical-rl genellikle rotate(90deg)'den daha iyidir, çünkü düzeni de değiştirir: element çakışmak yerine dikey alan kaplar. Küçük dekoratif eğimler için rotate kullan.

Bir elementi döndür

İki yol, aynı sonuç: transform içindeki rotate() fonksiyonu ya da tek başına rotate özelliği. Pozitif açılar saat yönünde döndürür:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rotate</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 50px; padding: 30px; }
    .box { width: 90px; height: 60px; display: grid; place-items: center; color: white; }
    .a { transform: rotate(45deg); background: #2563eb; }
    .b { rotate: 45deg; background: #16a34a; }
    .c { rotate: -15deg; background: #f59e0b; color: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div class="box a">transform</div>
    <div class="box b">rotate: 45deg</div>
    <div class="box c">-15deg</div>
  </div>
</body>
</html>

Mavi ve yeşil kutular tam olarak aynı şekilde, merkezleri etrafında saat yönünde 45 derece döndürülmüş. Kehribar rengi kutunun açısı negatif, bu yüzden saat yönünün tersine eğiliyor. Döndürme düzeni asla kaydırmaz: her kutu hâlâ orijinal 90'a 60'lık yuvasını kaplıyor; döndürülmüş elementlerin komşularıyla çakışabilmesinin nedeni budur.

Açı birimleri

Birim	Tam daire	90 derece
`deg`	`360deg`	`90deg`
`turn`	`1turn`	`0.25turn`
`rad`	`6.2832rad`	`1.5708rad`
`grad`	`400grad`	`100grad`

Olağan seçim deg'dir; dönme için turn iyi okunur (rotate: 1turn). 360'ın üzerindeki açılara izin verilir ve animasyonlarda önemlidir: bir keyframe'deki rotate(720deg) iki tur döner. Birimi her zaman yaz: rotate(45) geçersizdir ve yok sayılır.

Bir açıyı her birimde görmek için kaydırıcıyı sürükle:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angle slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .stage { display: grid; place-items: center; height: 160px; background: #f3f4f6; margin: 10px 0; }
    #arrow { width: 110px; height: 14px; background: #2563eb; border-radius: 7px; position: relative; }
    #arrow::after { content: ""; position: absolute; inset-inline-end: -10px; top: -8px; border: 15px solid transparent; border-inline-start: 18px solid #2563eb; border-inline-end: 0; }
  </style>
</head>
<body>
  <label>angle <input id="a" type="range" min="-360" max="360" value="30"></label>
  <div class="stage"><div id="arrow"></div></div>
  <p id="out"></p>
  <script>
    const input = document.getElementById('a');
    const update = () => {
      const deg = Number(input.value);
      document.getElementById('arrow').style.rotate = deg + 'deg';
      document.getElementById('out').textContent =
        deg + 'deg = ' + (deg / 360).toFixed(3) + 'turn = ' + (deg * Math.PI / 180).toFixed(4) + 'rad';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Bir köşe etrafında döndürmek: transform-origin

Bir element varsayılan olarak merkezi etrafında döner. transform-origin pivot noktasını taşır. Bir saat kolu ortası üzerinde değil, ucu üzerinde döner:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transform-origin</title>
  <style>
    .face { position: relative; width: 160px; height: 160px; border-radius: 50%; background: #e5e7eb; }
    .hand {
      position: absolute;
      left: 76px;              /* 80px center minus half the 8px width */
      top: 20px;
      width: 8px;
      height: 60px;
      border-radius: 4px;
      background: #111827;
      transform-origin: bottom center; /* pivot at the center of the face */
      rotate: 120deg;
    }
    .pin { position: absolute; left: 74px; top: 74px; width: 12px; height: 12px; border-radius: 50%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="face"><div class="hand" id="hand"></div><div class="pin"></div></div>
</body>
</html>

Kolun alt ucu kadranın merkezindeki kehribar rengi pimin üzerinde duruyor ve rotate: 120deg onu saat dörde çeviriyor. transform-origin satırını kaldır, kol bunun yerine pimin dışında kendi ortası etrafında döner.

Metin döndürme ve dikey etiketler

rotate ile küçük bir eğim bir rozet ya da çıkartma için uygundur. Gerçekten dikey bir etiket için writing-mode daha iyidir, çünkü düzeni değiştirir: element yanındakiyle çakışmak yerine uzun ve dar olur.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical text</title>
  <style>
    body { font-family: system-ui, sans-serif; padding-top: 24px; }
    .row { display: flex; gap: 12px; align-items: flex-start; }
    .label { background: #2563eb; color: white; padding: 6px 10px; }
    .rotated { rotate: -90deg; }
    .vertical { writing-mode: vertical-rl; rotate: 180deg; }
    .content { background: #e5e7eb; padding: 10px; }
    .badge { display: inline-block; rotate: -6deg; background: #f59e0b; padding: 4px 10px; margin: 16px 0 0 8px; }
  </style>
</head>
<body>
  <div class="row"><div class="label rotated" id="r">Section</div><div class="content">rotate: -90deg overlaps</div></div>
  <div class="row" style="margin-top: 20px;"><div class="label vertical" id="v">Section</div><div class="content">writing-mode takes vertical space</div></div>
  <span class="badge">New</span>
  <p id="out"></p>
  <script>
    const size = (id) => { const el = document.getElementById(id); return el.offsetWidth + ' x ' + el.offsetHeight; };
    document.getElementById('out').textContent = 'layout box: rotated ' + size('r') + ', writing-mode ' + size('v');
  </script>
</body>
</html>

Gösterge her etiketin düzen boyutunu gösteriyor. Döndürülmüş olan hâlâ orijinal geniş, kısa kutusunu kaplıyor: yanında boş bir aralık bırakıyor ve satırının üstünden ve altından, orada ne varsa onun içine taşıyor. writing-mode olan ise uzun, dar bir kutu kaplıyor. rotate: 180deg eklemek onu aşağıdan yukarı okunur yapar; dikey bir etiket için olağan yön budur.

Tıklamada ya da hover'da bir ikonu döndür

Bir oku 180 derece çevirmek, bir bölümün açık olduğunu göstermenin standart yoludur. rotate'i bir transition ile birleştir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rotating arrow</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font: inherit; border: 1px solid #111827; background: white; border-radius: 6px; }
    .chevron { width: 10px; height: 10px; border-inline-end: 2px solid #111827; border-bottom: 2px solid #111827; rotate: 45deg; transition: rotate 0.25s ease-out; }
    .toggle[aria-expanded="true"] .chevron { rotate: 225deg; }
  </style>
</head>
<body>
  <button class="toggle" aria-expanded="false">Details <span class="chevron" aria-hidden="true"></span></button>
  <script>
    const btn = document.querySelector('.toggle');
    btn.addEventListener('click', () => btn.setAttribute('aria-expanded', btn.getAttribute('aria-expanded') !== 'true'));
  </script>
</body>
</html>

Ok, aşağıyı göstersin diye 45 derece döndürülmüş, iki kenarlığı olan bir karedir. Buton genişletildiğinde 225 dereceye gider, yukarıyı gösterir ve transition yarım turu canlandırır. Stili aria-expanded özniteliği yönettiği için görsel durum ile ekran okuyucuların duyurduğu durum asla çelişemez.

Dönen bir yükleme göstergesi

Dönme, hız hiç değişmesin diye linear zamanlamayla tekrarlanan 0'dan 360 dereceye bir döndürmedir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spinner</title>
  <style>
    @keyframes spin {
      to { rotate: 360deg; }
    }
    .spinner {
      width: 36px;
      height: 36px;
      border: 4px solid #e5e7eb;
      border-top-color: #2563eb;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .spinner { animation-duration: 3s; } /* slower, still shows activity */
    }
  </style>
</head>
<body>
  <div class="spinner" role="status" aria-label="Loading"></div>
</body>
</html>

Yalnızca bir to keyframe'iyle animasyon elementin kendi döndürmesinden (yok) başlar ve 360deg'de biter; infinite onu atlama olmadan tekrarlar, çünkü 360deg 0 ile aynı görünür. Sistemlerinden azaltılmış hareket isteyen insanlar için gösterge üç kat daha yavaş döner. Keyframe'ler hakkında daha fazlası animasyon sayfasında.

3B döndürme: rotateX, rotateY

rotateX() bir elementi yatay eksen etrafında geriye yatırır, rotateY() ise onu bir kapı gibi dikey eksen etrafında çevirir. Perspektif olmadan yalnızca basık görünürler; ebeveyndeki perspective derinlik ekler:

.scene { perspective: 600px; }
.card  { transform: rotateY(35deg); }
.flip  { transform: rotateY(180deg); backface-visibility: hidden; } /* card flip */

Bir elementi döndürmek yerine aynalamak için scale: -1 1 (yatay çevirme) kullan. 180 derecelik bir döndürme onu baş aşağı çevirir; bu aynı şey değildir.

Sık yapılan hatalar

Yerinde kalan bir <span> ya da <a> döndürmek. Düz satır içi elementler transform'ları yok sayar. display: inline-block ekle.
Hover'da kaybolan bir döndürme. transform: scale(1.1) içeren bir hover kuralı transform: rotate(...)'in yerini alır. Ayrı rotate ve scale özelliklerini kullan ya da iki fonksiyonu birlikte listele.
Düzenin yer açmasını beklemek. Döndürülmüş bir resim döndürülmemiş kutusunu korur ve komşularıyla çakışır. Kapsayıcıya döndürülmüş boyutu ver ya da metin için writing-mode kullan.
ease ile dönen göstergeler. Varsayılan zamanlama her turda hızlanıp yavaşlar. linear kullan.
Yanlış nokta etrafında döndürmek. Açıyı ayarlamadan önce transform-origin'i ayarla.

Sıkça Sorulan Sorular

CSS'te bir element nasıl döndürülür?

transform: rotate(45deg); ya da ayrı özellik olan rotate: 45deg; kullan. Pozitif açılar saat yönünde, negatif açılar saat yönünün tersine döndürür; transform-origin'i değiştirmedikçe elementin merkezi etrafında.

transform: rotate() ile rotate özelliği arasındaki fark nedir?

Aynı sonucu çizerler. rotate özelliği transform'dan bağımsızdır, bu yüzden bir hover kuralı döndürmeyi kaldırmadan scale ya da translate'i değiştirebilir ve her birinin kendi transition'ı olabilir. Birlikte, hangi sırada bildirirsen bildir transform: translate() rotate() scale() gibi davranırlar.

CSS'te bir resim 90 derece nasıl döndürülür?

img'ye transform: rotate(90deg); (ya da rotate: 90deg;) ekle. Resim düzendeki orijinal yerini korur, bu yüzden yatay hale döndürülmüş uzun bir resim komşularıyla çakışabilir; kapsayıcısına döndürülmüş boyut için yer ver.

CSS'te bir element nasıl döndürülerek sürekli çevrilir?

@keyframes spin { to { rotate: 360deg; } } tanımla ve animation: spin 1s linear infinite; uygula. Hız sabit kalsın diye linear kullan ve prefers-reduced-motion: reduce altında yavaşlat ya da durdur.

CSS'te metin dikey olarak nasıl döndürülür?

Dikey bir etiket için writing-mode: vertical-rl genellikle rotate(90deg)'den daha iyidir, çünkü düzeni de değiştirir: element çakışmak yerine dikey alan kaplar. Küçük dekoratif eğimler için rotate kullan.

İlgili kavramlar