Funktionen rotate3d

Funktionen rotate3d sätter rotation av ett element på en given vinkel samtidigt relativt X-, Y- och Z-axlarna i tredimensionellt utrymme. Används tillsammans med egenskapen transform. Värdet på egenskapen är en vinkel i någon enhet för vinklar.

Som värden tar funktionen 4 parametrar, skrivna med kommatecken. De första tre parametrarna bestämmer axelvektorn i tredimensionellt utrymme, relativt vilken rotationen kommer att utföras. Den fjärde parametern sätter rotationsvinkeln.

Syntax

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

Exempel

I detta exempel kommer axelvektorn att riktas till det övre högra hörnet av skärmen:

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

Результат:

Se även