Fungsi rotate

Fungsi rotate() mengatur rotasi elemen pada sudut yang ditentukan. Digunakan bersama dengan properti transform. Nilai propertinya adalah sudut dalam satuan untuk sudut apa pun. Nilai positif memutar searah jarum jam, nilai negatif - berlawanan arah jarum jam. Rotasi dilakukan di sekitar titik yang ditentukan oleh properti transform-origin.

Sintaksis

cssselektor {
  transform: rotate(sudut);
}

Contoh

Dalam contoh ini, blok diputar sebesar 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, blok diputar sebesar 30 derajat berlawanan arah 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, blok akan berputar sebesar 1 putaran saat dihover, karena nilai rotasi ditetapkan dalam 1turn (efek yang sama dapat dicapai jika sudut rotasi ditetapkan ke 360deg). Untuk kelancaran rotasi, properti transition ditambahkan:

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

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotate(1turn);
}

Результат:

Lihat juga