rotateZ Fonksiyonu
rotateZ fonksiyonu, üç boyutlu uzayda Z ekseni
etrafında bir dönüş belirtir.
transform
özelliği ile birlikte kullanılır.
Özelliğin değeri, açı birimlerinden
herhangi biriyle belirtilen bir açıdır. Pozitif bir değer saat yönünde,
negatif bir değer saat yönünün tersine döndürür.
Dönüş, transform-origin
özelliği ile belirlenen nokta etrafında gerçekleşir.
Sözdizimi
seçici {
transform: rotateZ(açı);
}
Örnek
Bu örnekte, kutunun üzerine gelindiğinde Z ekseni etrafında
180 derece dönecektir. Dönüşün 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: rotateZ(180deg);
}
:
Örnek
transform-origin
özelliği ile dönüş eksenini değiştirelim:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
transform-origin: center bottom;
}
#elem:hover {
transform: rotateZ(180deg);
}
:
