Funktsioon rotate3d

Funktsioon rotate3d määrab elemendi pööramise antud nurga all samaaegselt X, Y, Z telje suhtes kolmemõõtmelises ruumis. Kasutatakse koos omadusega transform. Omaduse väärtuseks on nurk mis tahes nurgaühikutes.

Väärtustena võtab funktsioon vastu 4 parameetrit, mis on eraldatud komadega. Esimesed kolm parameetrit määravad telje vektori kolmemõõtmelises ruumis, mille suhtes toimub pööramine. Neljas parameeter määrab pöördenurga.

Süntaks

cssvalija {
  transform: rotate3d(X, Y, Z, nurk);
}

Näide

Selles näites on telje vektor suunatud ekraani paremasse ülanurka:

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

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotate3d(1, 1, 0, 180deg);
}

Результат:

Vaata ka