Merotasi Objek dengan CSS3
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> |
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