Properti transform

Properti transform menentukan transformasi elemen, seperti rotasi, penskalaan, skew, penerjemahan dan lainnya. Transformasi yang sesuai ditulis dipisahkan oleh spasi:

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

Contoh

Dalam contoh ini, blok diputar 30 derajat searah jarum jam:

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

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

Результат:

Contoh

Dalam contoh ini, selain rotasi, juga ditambahkan skew:

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

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

Результат:

Contoh

Dalam contoh ini, selain rotasi dan skew, ditambahkan juga perubahan 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;
}

Результат: