rotate funksiýasy

rotate() funksiýasy elementi bellenen burça öwürýär. transform hasiýeti bilen bilelikde ulanylýar. Hasiýetiň bahasy burç ülçeg birliklerindäki istýän bir burçdyr. Positive baha sagat ýelpygy boýunça, negative bolsa sagat ýelpygyna garşy öwürýär. Öwrüliş transform-origin hasiýeti bilen bellenen nokat daşyndan amala aşyrylýar.

Sintaksis

cssselektor {
  transform: rotate(burç);
}

Mysal

Bu mysalda blok sagat ýelpygy boýunça 30 gradusa öwrüldi:

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

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

Результат:

Mysal

Bu mysalda blok sagat ýelpygyna garşy 30 gradusa öwrüldi:

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

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

Результат:

Mysal

Bu mysalda blok gelinende 1 aýlaw öwrüler, sebäbi öwrüliş bahasy 1turn bellenen (şonuň ýaly täsiri 360deg burç bilen bellenende hem alynar). Öwrülişiň üznüksizligi üçin transition hasiýeti goşuldy:

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);
}

Результат:

Şeýle-de görüň