Funkce rotate3d

Funkce rotate3d nastavuje otočení prvku o zadaný úhel současně kolem os X, Y, Z v trojrozměrném prostoru. Používá se společně s vlastností transform. Hodnotou vlastnosti je úhel v libovolných jednotkách pro úhly.

Jako hodnoty funkce přijímá 4 parametry zapsané čárkami. První tři parametry určují vektor osy v trojrozměrném prostoru, kolem které bude provedeno otočení. Čtvrtý parametr nastavuje úhel otočení.

Syntaxe

cssselektor {
  transform: rotate3d(X, Y, Z, úhel);
}

Příklad

V tomto příkladu bude vektor osy směrován do pravého horního rohu obrazovky:

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

Результат:

Viz také