Kazi ya rotateY

Kazi rotateY inabainisha mzunguko kutoka kwa mhimili Y katika nafasi ya pande tatu. Inatumika pamoja na sifa transform. Thamani ya sifa ni pembe katika vipimo vyovyote vya pembe. Thamani chanya inazungusha kuelekea kwetu, hasi - kutoka kwetu. Mzunguko unafanyika karibu na uhakika, uliobainishwa na sifa transform-origin.

Kiowazi

csskichaguzi {
  transform: rotateY(pembe);
}

Mfano

Katika mfano huu, kipengele kitazunguka kwa 180 digrii kwenye mhimili Y inapovutia. Kwa umiliki wa mzunguko, sifa transition imeongezwa:

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

Результат:

Mfano

Badilisha mhimili wa mzunguko kwa kutumia sifa transform-origin:

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

Результат:

Angalia pia

  • kazi rotate,
    inayobainisha mzunguko kwenye mhimili X na Y
  • kazi rotateX,
    inayobainisha mzunguko kwenye mhimili X
  • kazi rotateZ,
    inayobainisha mzunguko kwenye mhimili Z
  • kazi rotate3d,
    inayobainisha mzunguko kwenye mihimili mitatu