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