X
X
X
Website Search®
X
Blog Archive®

❖ Merotasi Objek dengan CSS3

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


X

Posting Komentar