Tutorial Membuat Animasi Gambar Berputar (Pure CSS Only)

Kalian bosan dengan tampilan blog yang monoton dan tidak eye catching ?

Ingin ada sesuatu baru agar tampilan blog kalian lebih menarik ?

Nah.. Kali ini saya akan berbagi tutorial membuat animasi gambar di postingan blog kalian bisa berputar dan ini hanya dengan memakai kode CSS aja lho..

Caranya cukup mudah dan ga bikin otak kalian berputar seperti tutorial yang akan saya bagikan kali ini.

Pertama dan utama, pastikan kalian punya blog (Blogger) dulu ya.

Masuk ke menu Theme kemudian Edit HTML

Langsung ke pengaturan CSS kalian.

Copy code CSS dibawah ini dan Paste diatas kode </head>

.rotate img{

  -webkit-transition: -webkit-transform 1.1s ease-in-out;

  transition: transform 1.1s ease-in-out;

}

.rotate img:hover{

  -webkit-transform: rotate(360deg);

  transform: rotate(360deg);

}

Untuk menampilkan gambar berputar dipostingan. Pindah ke mode < > HTML dan gunakan kode dibawah ini :

<div class="rotate img">

ISI Dengan URL Gambar Kalian Sendiri

</div>

Bagaimana ?? Gampang kan ?! Silahkan dicoba diblog kalian sendiri.

Agar tidak mempengaruhi halaman lainnya, kode yang saya tandai bisa kalian rubah sendiri sesuai selera kalian.Tapi juga harus disesuaikan dengan tag div nya. Atau juga bisa menggunakan tag kondisonal agar bisa tampil hanya di halaman tertentu.

Misalnya jika kalian ingin menampilkan animasi tersebut hanya dipostingan, gunakan tag seperti ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Masukkan Kode CSS Disini
</b:if>

Untuk Demonya silahkan lihat dibawah ini :

Selamat Mencoba !!