rotateX функциясы
rotateX функциясы үч өлчөмдүк мейкиндикте
X огуна салыштырмалуу айланууну белгилейт. Ал
transform касиети менен бирге колдонулат.
Касиеттин мааниси катары бурчтун кайсыл бир өлчөм бирдигиндеги маани берилет. Оң маани бизге карай, терс маани бизден алыстатып айландырат.
Айлануу transform-origin касиети менен белгиленген чекиттин айланасында жүргүзүлөт.
Синтаксис
селектор {
transform: rotateX(бурч);
}
Мисал
Бул мисалда блокка курсорду алып барганда X огу боюнча
180 градуска айландырылат. Айлануунун жылмакайдыгы үчүн
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);
}
:
