Egenskapen transform

Egenskapen transform sätter transformationer för ett element, såsom rotation, skalning, snedställning, förflyttning och andra. Motsvarande transformationer skrivs mellan mellanslag:

cssselektor {
  transform: rotate(30deg) scale(3);
}

Exempel

I detta exempel är blocket roterat 30 grader medurs:

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

css#elem {
  transform: rotate(30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Exempel

I detta exempel har förutom rotation även snedställning lagts till:

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

css#elem {
  transform: rotate(30deg) skew(20deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Exempel

I detta exempel har förutom rotation och snedställning även förändring av skalan lagts till:

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

css#elem {
  transform: rotate(30deg) skew(20deg) scale(2, 3);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат: