rotate функциясы

rotate() функциясы элементти белгиленген бурчко бурат. transform касиети менен бирге колдонулат. Касиеттин мааниси каалаган бурч бирдиктеринде болот. Оң маани саат жебеси багытында, терс маани саат жебесине каршы бурат. Буруу transform-origin касиети менен белгиленген чекиттин тегерегинде аткарылат.

Синтаксис

cssтандоочу {
  transform: rotate(бурч);
}

Мисал

Бул мисалда блок 30 градуска саат жебеси багытында бурулган:

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

css#elem {
  transform: rotate(30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Мисал

Бул мисалда блок 30 градуска саат жебесине каршы бурулган:

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

css#elem {
  transform: rotate(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Мисал

Бул мисалда блокко чыкылганда 1 айланымга бурулат, анткени бурулуу мааниси 1turn менен берилген (ошол эле эффектти 360deg бурч менен да алса болот). Барган сайын бурулуу үчүн transition касиети кошулган:

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

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotate(1turn);
}

Результат:

Ошондой эле караңыз