Dashboard

Kalau dipikir-pikir kayaknya udah lama nih gak bahas tentang CSS3, banyak sekali hal menarik yang bisa kita lakukan dengan CSS3.
Trik CSS3 kali ini adalah transform rotate yang fungsinya untuk memutar gambar/text sesuai keinginan.
Perlu diketahui bahwa CSS3 hanya bekerja pada sebagian browser, oleh karena itu untuk hasil maksimal gunakan browser versi terbaru (disarankan Safari atau Firefox, dan jangan gunakan IE)
Besaran text/gambar yang ingin diputar ditentukan dalam satuan deg (degree/derajat)

Kode CSS3 standartnya kurang lebih

transform:rotate(180deg);

Supaya support di beberapa browser, kita tambahkan lagi kodenya sehingga menjadi

-moz-transform:rotate(180deg);
-webkit-transform:(180deg);
-o-transform:(180deg);
-icab-transform:(180deg);
-khtml-transform:(180deg);

Pemasangannya sendiri bisa langsung diaplikasikan ke tag html seperti div ataupun span dengan menaruh CSSnya setelah style seperti dibawah ini

<div style="transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:(180deg);-o-transform:(180deg)-icab-transform:(180deg);-khtml-transform:(180deg);">SESUATU YANG INGIN DIBALIK</div>

Atau bisa juga dengan memanggil fungsi pemanggilan class dengan cara
Paste CSS3 dibawah ini diatas tag ]]></b:skin>

#miring {
transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:(180deg);
-o-transform:(180deg);
-icab-transform:(180deg);
-khtml-transform:(180deg);
}

Simpan Template
Lalu untuk pemanggilannya gunakan perintah class pada tag html

<div class="miring'>SESUATU YANG INGIN DIBALIK</div>

Sebenarnya trik ini pernah aku post sebelumnya dengan judul "Membuat Teks Terbalik dengan CSS3"
Tapi mungkin akan lebih jelas disini, jangan lupa komentarnya ea!