rotate функциясы
rotate() функциясы элементти
белгиленген бурчко бурат. transform
касиети менен бирге колдонулат.
Касиеттин мааниси каалаган бурч бирдиктеринде болот. Оң маани саат жебеси
багытында, терс маани саат жебесине каршы бурат.
Буруу transform-origin
касиети менен белгиленген чекиттин тегерегинде аткарылат.
Синтаксис
тандоочу {
transform: rotate(бурч);
}
Мисал
Бул мисалда блок 30
градуска саат жебеси багытында бурулган:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Мисал
Бул мисалда блок 30
градуска саат жебесине каршы бурулган:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Мисал
Бул мисалда блокко чыкылганда
1 айланымга бурулат, анткени бурулуу мааниси
1turn менен берилген (ошол эле эффектти
360deg бурч менен да алса болот). Барган сайын
бурулуу үчүн transition
касиети кошулган:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate(1turn);
}
:
