Rotate

rotate() ile öğeleri döndürmeyi öğrenirsin.

rotate() fonksiyonu

rotate() bir öğeyi dönüşüm merkezi çevresinde döndürür. Açı birimi derecedir: rotate(45deg) öğeyi saat yönünde 45 derece çevirir.

Dönüşüm merkezi varsayılan olarak öğenin ortasıdır. Bu noktayı başka bir yere taşımak için transform-origin özelliğini kullanabilirsin. Bir sonraki adımda bu konuyu ayrıntılı ele alacağız.

Negatif açı ve yön

Negatif açı öğeyi saat yönünün tersine döndürür. rotate(-45deg) 45 derece sola çevirir. Yönü işaret belirler; pozitif saat yönü, negatif karşı yönü verir.

rotate(360deg) tam tur yapar; sonuçta görüntü aynı görünür ama dönüşüm yine de hesaplanır. Bu yüzden küçük açılar çoğu zaman yeterlidir; görsel etkiyi korur.

transform-origin ile döndürme

Döndürme noktasını transform-origin özelliği ile değiştirebilirsin. transform-origin: top left yazıp rotate(45deg) uygularsan öğe sol üst köşeden döner.

Bu, bir kapak ya da sallanan bir etiket için doğal bir his yaratır. Merkezi farklı köşelere taşıyarak çeşitli döngüler kurabilirsin; her köşe başka bir devinim verir.

Uygulama Hover efektli döndürme

İki stil bloğu ekle. Birincisi .icon seçicisi: transform: rotate(0deg). İkincisi .icon:hover seçicisi: transform: rotate(90deg). İkon hover'da 90 derece dönmeli.

Örnek çözümü göster

/* ikon için dönüşüm ekle */
.icon {
  transform: rotate(0deg);
}
.icon:hover {
  transform: rotate(90deg);
}

Kendini test et

rotate(90deg) ne yapar?
```
.etiket {
  transform: rotate(90deg);
}
```
- Öğeyi 90 piksel sağa kaydırır
- Öğeyi saat yönünde 90 derece döndürür
- Öğeyi 90 piksel büyütür
- Öğeyi 90 piksel yukarı taşır
Cevabı göster

Öğeyi saat yönünde 90 derece döndürür — Doğru. rotate açısal bir dönüşümdür; 90 derece saat yönünde çevirir.

rotate açısını yaz

.etiket {
  transform: rotate(____);
}

Cevabı göster

.etiket {
  transform: rotate(-30deg);
}

Açıyı yönüne eşle

rotate(45deg)

Saat yönünde 45°
rotate(-45deg)

Saat yönünün tersine 45°
rotate(180deg)

Yarım dönüş
rotate(360deg)

Tam tur

Sıradaki ders: Scale

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler