Cara Membuat Efek Rotate Miring dengan CSS3

INILAH cara membuat efek rotate miring dengan CSS3. Efek ini bekerja saat mouse disorot ke header, maka header bergerak ke posisi normal yang sebelumnya miring. Efek miring ini tidak pada header saja, namun pada semua widget di blog, seperti gambar dan teks ataupun lainnya.

Cara pasangnya cukup mudah, cuma perlu mengedit sedikit kode CSS saja, yaitu dengan menggunakan kode CSS3. Tetapi ada kekurangannya, karena hanya browser terbaru yang support CSS3. Ada dua efek miring yang bisa dibuat:

1. Efek miring ke kanan:

transform:rotate(2deg); -moz-transform:rotate(2deg); -webkit-transform:rotate(2deg); -o-transform:rotate(2deg)

2. Efek miring ke kiri:

transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg)

Namun perlu dihatikan angka berwarna merah, itu adalah besar rotate, makin besar angkanya maka akan semakin miring. Misalkan ingin memberikan efek rotate miring pada bagian judul posting, maka cari dulu kode pada bagian postingan dengan kode seperti berikut:

        .post h3 a {
        color:#222;
        margin:0;
        text-shadow:0px 1px 1px #fff;
        }
        .post h3 a:hover {
        color:#ddd;
        text-shadow:0px 1px 1px #000;
        }

Setelah ketemu, masukkan kode CSS di atas di dalamnya sebelum tag penutup }
Hasilnya seperti ini:

        .post h3 a {
        color:#222;
        margin:0;
        text-shadow:0px 1px 1px #fff;
        transform:rotate(2deg); -moz-transform:rotate(2deg); -webkit-transform:rotate(2deg); -o-transform:rotate(2deg)
        }
        .post h3 a:hover {
        color:#ddd;
        text-shadow:0px 1px 1px #000;
        transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg)
        }

Setelah cara di atas dilalukan, coba priview dulu, setelah ada perubahan, baru SAVE TEMPLATE. Selamat mencoba cara membuat efek rotate miring dengan CSS3 ini!