Egenskapen transform

Egenskapen transform setter transformasjoner for et element, slik som rotasjon, skalering, forskyvning, translasjon og andre. Tilsvarende transformasjoner skrives separert med mellomrom:

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

Eksempel

I dette eksemplet er blokken rotert 30 grader med klokken:

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

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

Результат:

Eksempel

I dette eksemplet er det i tillegg til rotasjon lagt til forskyvning:

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

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

Результат:

Eksempel

I dette eksemplet er det i tillegg til rotasjon og forskyvning lagt til endring av skala:

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

Результат: