rotateY funksiýasy

rotateY funksiýasy üç ölçegli giňişlikde Y okuna göre aýlanmany kesgitleýär. Ol transform hasiýeti bilen bilelikde ulanylýar. Hasiýetiň bahasy islendik burç ölçeg birliginde bolup biler. Öýje burç bahasy element bize tarap, eksisi bize garşy tarap aýlanýar. Aýlanma, transform-origin hasiýeti bilen kesgitlenýän nokat töwereginde amala aşyrylýar.

Sintaksis

cssselektor {
  transform: rotateY(burç);
}

Mysal

Bu mysalda, blok gelinende Y okuna boyunça 180 gradusa aýlanar. Aýlanmanyň ýumşaklygy üç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: rotateY(180deg);
}

Результат:

Mysal

transform-origin hasiýeti ýardamynda aýlanma okyny üýtgedeliň:

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

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

Результат:

Şeýle-de görüň