rotateY Fonksiyonu
rotateY fonksiyonu, üç boyutlu uzayda Y eksenine göre
döndürmeyi belirler. transform
özelliği ile birlikte kullanılır. Özelliğin değeri, herhangi bir açı biriminde
bir açıdır. Pozitif değer bize doğru, negatif değer bizden uzağa doğru döndürür.
Döndürme, transform-origin
özelliği ile belirlenen nokta etrafında gerçekleşir.
Sözdizimi
seçici {
transform: rotateY(açı);
}
Örnek
Bu örnekte, kutunun üzerine gelindiğinde Y ekseninde
180 derece dönecektir. Döndürmenin 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: rotateY(180deg);
}
:
Örnek
transform-origin
özelliği ile dönme 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: right center;
}
#elem:hover {
transform: rotateY(180deg);
}
:
