Dalam kesempatan kali ini Mas Idris akan membahas tentang pemanfaatan CSS3 untuk membuat sentuha efek animasi pada sebuah objek. Sebelum CSS3 release. Cara untuk memberikan efek gerak pada sebuah objek hanya bisa dilakukan menggunakan Javascript / JQuery saja, namun dengan hadirnya CSS3 inilah kini kita bisa membuat efek animasi cukup menggunakan HTML5 dan CSS3 saja.
Namun, bagaimana cara membuatnya dalah cukup mudah saja. Perhatikan langkah-langkah di bawah ini :
Namun, bagaimana cara membuatnya dalah cukup mudah saja. Perhatikan langkah-langkah di bawah ini :
1. Tuliskan skrip HTML5 sebagai objek dasarnya :
<!DOCTYPE HTML>
<html>
<head>
<title> OBJEK BERPUTAR DENGAN CSS3 </title>
</head>
<div id="kotak">
</div>
</html>
2. Tulis skrip CSS3 untuk memberikan sentuhan desain dan animasinya nant :
<!DOCTYPE HTML>
<html>
<script language="text/css">
#kotak {
background: black;
padding: 200px 10px;
-ms-transition: 1.1s;
-o-transition: 1.1s;
-ms-transition: 1.1s;
-o-transition: 1.1s;
-moz-transition: 1.1s;
-webkit-transition: 1.1s;
transition: 1.1s;
width: 300px;
height: 300px;
}
#kotak:hover {
-webkit-transform: rotate (360deg);
-moz-transform: rotate (360deg);
-ms-transform: rotate (360deg);
-o-transform: rotate (360deg);
transform: rotate (360deg);
-moz-transform: rotate (360deg);
-ms-transform: rotate (360deg);
-o-transform: rotate (360deg);
transform: rotate (360deg);
}
</script>
<head>
<title> OBJEK BERPUTAR DENGAN CSS3 </title>
</head>
<div id="kotak">
</div>
</html>
3. Simpan file ini dengan nama indek.html
Tutorial untuk membuat objek berputar menggunakan CSS3 sudah selesai dan silahakan jalankan file index,html tersebut di browser anda :
Web Browser Supported :
- Mozilla Firefox 10+
- Google Chrome
Anda juga bisa melihat hasil kreasi saya yang juga serupa dengan judul posting ini Membuat Obyek Berputar Menggunakan CSS3 di >> http://kandangilmu.tk/MusicLive/
Namun tampilan berikut akan terbaca oleh browser dengan baik hingga gambar berputar hanya menggunakan Mozilla Firefox karena saya hanya men-set script nya untuk Firefox 10+ saja.
Posting Komentar
Thanks for you'r comments