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
seç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:
<div id="elem">lorem ipsum</div>
#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:
<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: rotateX(180deg);
}
:
Örnek
Negatif bir açı belirleyelim:
<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: rotateX(-180deg);
}
:
