Transform xassəsi

transform xassəsi elementin transformasiyalarini, məsələn döndürmə, miqyaslama, əyilmə, yerdəyişmə və digərlərini təyin edir. Uyğun transformasiyalar boşluqla ayrılaraq yazılır:

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

Nümunə

Bu nümunədə blok saat əqrəbi istiqamətində 30 dərəcə döndürülüb:

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

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

Результат:

Nümunə

Bu nümunədə döndürmə ilə yanaşı əyilmə də əlavə edilib:

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

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

Результат:

Nümunə

Bu nümunədə döndürmə və əyilmə ilə yanaşı miqyaslama da əlavə edilib:

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

Результат: