Cara Membuat Efek Rorate Miring Dengan CSS3

Cara Membuat Efek Rorate Miring Dengan CSS3 – Sobat Anaktimor-17 , kali ini saya share tips menghias blog . Dalam tips kali ini tidak kalah menarik dengan postingku sebelumnya , dan kali ini saya akan share’ cara membuat efek animasi miring ‘ artinya jika mouse disorot ke bagian header tersebut akan bergerak ke posisi normal yang sebelumnya miring .

            Efek miring tersebut tidak hanya untuk pada bagian headernya saja , tapi bisa diterapkan di widget2 di blog Anda  . Menarikkan? Pengen mencoba? Caranya sangat mudah, Anda hanya perlu membaca tips dibawah ini dan dipraktekkan langsung ke blog Anda . Hanya perlu mengutak-atik sedikit kode CSS-nya yaitu dengan menggunakan kode CSS3 .

NB:

            Hanya browser terbaru yang bisa support CSS3

Sebelum kita melihat kode CSS nya, disini saya akan memberikan 2 (dua) efek miring yang pertama :

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)

NB : 

Sobat Perhatikan angka yang berwarna merah, itu adalah besar Rotate, jika makin besarangkanya maka akan semakin miring

Jadi caranya begini, misalkan sobat pengen memberikan efek rotate miring pada bagian Judul Posting, maka kita cari dulu Kode pada bagian Postinganya  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, sobat tinggal memasukkan kode CSS diatas didalamnya sebelum tag penutup }
Maka 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 diatas kita lalukan, coba di Priview dulu, setelah ada perubahan, baru SAVE TEMPLATE.

Anda dapat menerapkanya pada widget2 di blog Anda , tapi pembahasan saya cukup sampai disini . Tinggal Anda yang mengutak-atiknya .

Salam Ide Kreasi…

Selamat Bekerja dan Semoga Bermamfaat!!

Jangan lupa commentnya…