Merotasi Objek dengan CSS3

Tabel Konten
  1. HASIL TAMPILAN DERAJAT POSITIF 
  2. HASIL TAMPILAN DERAJAT NEGATIF 
Rotasi

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-DownInline
#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>

HASIL TAMPILAN DERAJAT POSITIF 

HASIL TAMPILAN DERAJAT NEGATIF 

2 Komentar

  • Admin 3

    wah unik nih gan, buat bikin postingan, hehe..!!
    makasih gan ilmunya sangat bermanfaat sekali..!!

  • iam

    Dulu saya pakai rotate ini untuk title h2 template blogspot saya (waktu masih pake blogspot), terus pas di hover, kembali seperti semula, hehe :D

Komentar telah ditutup.