Membuat Gambar Berputar Dengan CSS Transform

Css Hover Transform Rotate Image

Css Trick Hover Image Dengan Animasi Berputar Ketika Di Sentuh Cursor.. Cara Membuat Gambar Berputar Ketika Di Sentuh Cursor Dengan CSS transform: rotate...

Karena bingung mau posting apa, udah 5 hari ga buat postingan, maka saya iseng2 buat tutorial css animation pada image dengan efect hover pada gambar..

Nah langsung saja kita ke tutorialnya....

• Seperti biasa, login terlebih dahulu ke blogger.com

• Cari Kode </head>

• Setelah itu masukan css dibawah ini tepat di atasnya..

<style type='text/css'>
body img{
  -webkit-transition: -webkit-transform 1.1s ease-in-out;
  transition: transform 1.1s ease-in-out;
}
body img:hover{
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
</style>

Kalian bisa membuat efect rotate seperti pada link text, gambar, div dan yang lainnya.. dengan cara mengganti kode ini body img
Kode di ata berfungsi untuk membuat efect hover pada semua image yang ada pada body, seperti image di postingan, popular post dll

Contoh tampilan dari kode di atas sebagai berikut..
Animation Pada Image

Animation Pada text / link

CSS Animation Transform Rotate

Mungkin itu saja dari postingan yang tidak bermanfaat tentang Css Trick : Cara Membuat Gambar Berputar Dengan CSS Transform Rotateini..

Semoga nanti saya dapat membuat postingan yang lebih bermanfaat lagi buat kalian :V :V