rotateZ funksiýasy

rotateZ funksiýasy üçölçegli giňişlikde Z oky boýunça öwürmäni kesgitleýär. Ol transform häsisi bilen bilelikde ulanylýar. Häsisiň bahasy, islendik burç ölçeg birliginde berlip bilner. Positive baha sagat ýelwisegine, negative bolsa tersine öwürýär. Öwürmek, transform-origin häsisi bilen kesgitlenýän nokat daşyndan amala aşyrylýar.

Sintaksis

cssselektor {
  transform: rotateZ(burç);
}

Mysal

Bu mysalda, blok gelende Z oky boýunça 180 gradus öwüriler. Öwürmegiň yumşaklygy üçin transition häsisi 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: rotateZ(180deg);
}

Результат:

Mysal

Öwrülýän oky transform-origin häsisi ýardamy bilen çalyşalyň:

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

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
  transform-origin: center bottom;
}
#elem:hover {
  transform: rotateZ(180deg);
}

Результат:

Şeýle-de görüň