Membuat Animasi Roda Berputar dengan CSS3

Sejak CSS3 muncul dengan fitur barunya telah membuat banyak developer khususnya yang tertarik di bidang design website, ingin membuat suatu tampilan website yang interaktif. Seperti yang kita ketahui, dahulu untuk membuat website terlihat dinamis dan interaktif tidak bisa mengandalkan HTML dan CSS saja. Dengan hadirnya CSS3 ini dapat membantu kita untuk membangun website dengan gerakan yang dinamis. Sesuai dengan pembahasan kita kali ini, kita akan membuat animasi roda berputar dengan CSS3.

Membuat animasi roda berputar terbilang cukup mudah, hal yang perlu dipersiapkan adalah contoh gambar roda dan sedikit script HTML CSS saja. Untuk penjelasan lebih lanjut ada baiknya langsung kita mulai prakteknya dengan menyalin contoh code berikut agar mempersingkat waktu.

roda.html

<html>
<head>
	<meta charset="UTF-8">
	<title> Animasi Roda dengan CSS </title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<img src="roda.png" alt="" width="200">
	</div>
</body>
</html>

style.css

.container{
	width: 500px;
	margin: auto;
}
img{					    
    /* Rotate div */
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);

    -webkit-transition: transform 2s; /* For Safari 3.1 to 6.0 */
    transition: transform 2s;

}
img:hover{					    
    /* Rotate div */
    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
}

Setelah sudah kalian simpan kedua file tersebut dengan masing-masing nama dan format filenya sesuai dengan judul diatas script. Karena kedua file ini sangat berkaitan, maka harus disimpan dalam satu folder yang sama. Untuk melihat hasilnya kalian cukup membuka file html pada browser kalian. Jika berhasil maka tampilanya akan seperti ini.

membuat-animasi-roda-berputar-dengan-css3-ranggalogo-031017

Gambar diatas adalah tampilan awalnya, saat mouse kalian berada pada gambar tersebut, maka akan terjadi animasi roda berputar. Dengan fitur baru dari CSS3 yaitu transform dan transition kita bisa membuat animasi sederhana seperti contoh animasi roda berputar. Tentu kalian bisa membuat yang lebih keren lagi dengan modifikasi lebih lanjut. Mudah bukan ?

Sekian pembahasan mengenai bagaimana cara membuat animasi roda berputar dengan CSS3. Semoga artikel kali ini bermanfaat dan menginspirasi kalian semua. Sampai jumpa pada artikel menarik lainya hanya di Dumet School.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *