Fonksiyon rotateX

rotateX fonksiyonu, üç boyutlu uzayda X ekseni etrafında bir dönüş belirtir. transform özelliği ile birlikte kullanılır. Özelliğin değeri, herhangi bir açı biriminde bir açıdır. Pozitif bir değer bize doğru, negatif bir değer ise bizden uzağa doğru döndürür. Dönüş, transform-origin özelliği ile belirlenen nokta etrafında gerçekleşir.

Sözdizimi

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

Örnek

Bu örnekte, kutu üzerine gelindiğinde X ekseni etrafında 180 derece dönecektir. Dönüşün daha yumuşak 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: rotateX(180deg);
}

Результат:

Örnek

transform-origin özelliği ile dönüş 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: center bottom;
}
#elem:hover {
  transform: rotateX(180deg);
}

Результат:

Örnek

Negatif bir açı belirleyelim:

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

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

Результат:

Ayrıca bakınız