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

cssseç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:

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

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

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

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
  transform-origin: right center;
}
#elem:hover {
  transform: rotateY(180deg);
}

Результат:

Ayrıca bakınız