Mecha versi 2.6.3 sudah dirilis!

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.