Membuat Gambar Header Berputar

di
Malem para sobat , Postingan kali ini tentang membuat gambar header berputar , mungkin sobat pernah melihat blog seperti itu , bagi sobat yang mau header nya berputar kita akan membahasnya.


CSS ini akan bekerja jika sobat menggunakan header gambar.Jika sobat masih memakai header text sobat harus rubah dulu jika ingin tampilan gambar header berputar.

Tutorial :

  • Login Bloger
  • Klik Template
  • Edit HTML
  • Centang Expand Template Widget
  • Cari Code ]]></b:skin> 
  • Copy code dibawah lalu paste di atas code ]]></b:skin>
#header a img:hover {
 -moz-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);-webkit-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);-o-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);-webkit-transition: all 600ms ease-in-out;
 -moz-transition: all 600ms ease-in-out;
 -ms-transition: all 600ms ease-in-out;-o-transition: all 600ms ease-in-out;
 transition: all 600ms ease-in-out;
}

  • Klik Simpan Template
Keterangan :

  • Kode yang berwarna merah adalah besar Rotasi , Sobat bisa mengedit nya sendiri
  • Kode - ( Minus ) Menunjukan rotasi berlawanan terhadap arah jarum jam dan sobat bisa menghilanghkan kode itu ( Minus ) Kalau mau gambarnya berputar searah jarum jam , contoh (-180deg)

Artikel Menarik Lainnya :