rotate fonksiyonu
rotate() fonksiyonu, bir elemanı
belirli bir açıyla döndürmeyi ayarlar.
transform özelliği ile
birlikte kullanılır. Değer olarak açı birimlerinden
herhangi biri kullanılır. Pozitif bir değer saat yönünde,
negatif bir değer saat yönünün tersine döndürme yapar.
Döndürme işlemi, transform-origin
özelliği ile belirlenen nokta etrafında gerçekleşir.
Sözdizimi
seçici {
transform: rotate(açı);
}
Örnek
Bu örnekte kutu saat yönünde 30
derece döndürülmüştür:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Örnek
Bu örnekte kutu saat yönünün tersine 30
derece döndürülmüştür:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Örnek
Bu örnekte, kutu üzerine gelindiğinde 1
tur dönecektir, çünkü döndürme değeri
1turn olarak ayarlanmıştır (aynı etki
360deg açı değeri verilerek de elde edilebilir).
Döndürme işleminin akıcı olması için
transition
özelliği eklenmiştir:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate(1turn);
}
:
