Transform nedir?
transform özelliğinin temelini öğrenirsin.
transform özelliği nedir?
CSS'te transform özelliği bir öğeyi özgün konumundan taşır, döndürür, ölçeklendirir ya da eğer. Biçim (layout) akışını bozmaz; çizim katmanında gerçekleşir.
Bu yüzden komşu öğeler yer değiştirmez. transform: rotate(8deg) yazarsan öğe eğilir ama yanındaki metin olduğu gibi kalır. Hover efektleri ve küçük animasyonlar için ideal bir araçtır.
Koordinat sistemi
transform işlemleri CSS koordinat sisteminde (coordinate system) gerçekleşir. Orijin (0, 0) öğenin sol üst köşesidir. X ekseni sağa, Y ekseni aşağı doğru büyür.
Bu yüzden translate(20px, 30px) demek öğeyi sağa 20 piksel, aşağı 30 piksel kaydırmaktır. Negatif değerler sola ve yukarı götürür.
transform-origin
Her öğenin bir dönüşüm merkezi vardır. transform-origin özelliği bu noktayı belirler. Varsayılan değer öğenin geometrik ortasıdır: 50% 50%.
transform-origin: top left yazarsan döndürme sol üst köşeden yapılır. Bu, dönen bir kapak veya sallanan bir rozet için belirgin bir fark yaratır. Aynı açı bile farklı hissedilir.
Uygulama Rozet için dönüşüm ekle
Bir .badge seçicisi yaz ve içine transform: rotate(8deg) bildirimini ekle. Rozet sekiz derece dönmeli.
Örnek çözümü göster
/* rozet için dönüşüm ekle */
.badge {
transform: rotate(8deg);
}Kendini test et
-
Hangi bildirim bir dönüşüm uygular?
/* birini seç */- padding: 12px
- display: grid
- transform: rotate(20deg)
- color: navy
Cevabı göster
transform: rotate(20deg) — Doğru. transform özelliği öğeye bir dönüşüm uygular; burada 20 derece döndürür.
-
Dönüşüm bildirimini tamamla
.kutu { ____: translate(10px, 20px); }Cevabı göster
.kutu { transform: translate(10px, 20px); }