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

cssseçici {
  transform: rotate(açı);
}

Örnek

Bu örnekte kutu saat yönünde 30 derece döndürülmüştür:

html<div id="elem">lorem ipsum</div>

css#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:

html<div id="elem">lorem ipsum</div>

css#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:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotate(1turn);
}

Результат:

Ayrıca bakınız