Proprietatea transform

Proprietatea transform stabilește transformările elementului, cum ar fi rotația, scalarea, înclinarea, deplasarea și altele. Transformările corespunzătoare sunt scrise separate prin spațiu:

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

Exemplu

În acest exemplu, blocul este rotit la 30 grade în sensul acelor de ceasornic:

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

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

Результат:

Exemplu

În acest exemplu, pe lângă rotație, este adăugată și o înclinare:

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

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

Результат:

Exemplu

În acest exemplu, pe lângă rotație și înclinare, este adăugată și o modificare a scării:

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

Результат: