Merotasi Objek dengan CSS3

Rabu, 03 Agustus 2011

Tabel Konten

Berikut ini adalah kode CSS dasar untuk membuat efek rotasi pada objek:

div {
  -webkit-transform:rotate(30deg); /* Safari dan Chrome */
  -moz-transform:rotate(30deg);    /* Firefox */
  -ms-transform:rotate(30deg);     /* IE9 */
  -o-transform:rotate(30deg);      /* Opera */
  transform:rotate(30deg);         /* W3C */
}

(30deg) adalah ukuran derajat rotasi. Kamu juga bisa menuliskan nilai derajat negatif untuk memutar objek ke arah sebaliknya. Cara penerapannya bisa diletakkan secara topdown ataupun inline seperti ini:

Top-Down	Inline
`#contoh1 { -webkit-transform:rotate(30deg); -moz-transform:rotate(30deg); -ms-transform:rotate(30deg); -o-transform:rotate(30deg); transform:rotate(30deg); } ...... <div id='contoh1'> HASIL TAMPILAN </div>`	`<div style='-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-ms-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg);'> HASIL TAMPILAN </div>`