Функсияи rotateX
Функсияи rotateX гардондани унсур нисбат ба
меҳвари X дар фазои сеандозаро мушаххас мекунад. Бо якҷоягӣ
бо хосияти transform истифода мешавад.
Қимати хосият як кунҷ дар ягон аз воҳидҳои кунҷ
мебошад. Қимати мусбат унсурро ба сӯи мо, қимати манфӣ — аз сӯи мо мегардонад. Гардиш
дар атрофи нуқтае, ки аз тарафи хосияти transform-origin
мушаххас карда мешавад, сурат мегирад.
Синтаксис
интихобкунанда {
transform: rotateX(кунҷ);
}
Намуна
Дар ин намуна блок бо гузаронидани курсор
180 дараҷа нисбат ба меҳвари X гардонда мешавад.
Барои нармии гардиш хосияти transition илова карда шудааст:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotateX(180deg);
}
:
Намуна
Меҳвари гардишро бо ёрии хосияти
transform-origin иваз мекунем:
<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);
}
:
Намуна
Кунҷи манфиро мушаххас мекунем:
<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);
}
:
