Transform dan Transition merupakan Property yang terdapat di CSS3. Transform digunakan untuk merubah bentuk suatu objek, baik perubahan skala maupun perputaran. Sedangkan Transition digunakan untuk mengatur waktu perubahan dari satu bentuk ke bentuk lainnya. Dengan memanfaatkan Property ini, nantinya Anda dapat membuat Animasi dan memberikan efek menarik di website yang didesain.
Untuk mendapatkan hasil yang maksimal, tentunya Anda harus menggunakan Browser yang mendukung begitu juga dengan user.
Property Transform didukung oleh browser sebagai berikut :
- Internet Explorer 9 membutuhkan awalan -ms-
- Firefox membutuhkan awalan -moz-
- Chrome dan Safari membutuhkan awalan -webkit-
- Opera membutuhkan awalan -o-
Sedangkan Property Transition didukung oleh browser sebagai berikut :
- Internet Explorer belum mendukung properti transisi.
- Firefox membutuhkan awalan -moz-
- Chrome dan Safari membutuhkan awalan -webkit-
- Opera membutuhkan awalan -o-
Memulai
Sekarang, mari perhatikan contoh animasi sederhana berikut ini :
Berikut syntax untuk menuliskan transform & transition (animasi diatas) :
<html>
<head>
<title>CSS3 : Transform dan Transition</title>
<style type="text/css">
#kotak
{
width:150px;
height:100px;
margin:30px 0 30px 20px;
background-color:yellow;
transition:all .5s;/*Pernyataan untuk memberi efek Transition secara umum*/
-moz-transition:all .5s;/*Firefox*/
-webkit-transition:all .5s;/*Safari dan Chrome*/
-o-transition:all .5s;/*Opera*/
}
#kotak:hover {
transform:rotate(30deg);/*Pernyataan untuk memberi efek transform secara umum*/
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari dan Chrome */
-o-transform:rotate(30deg);/*Opera*/
}
</style>
</head>
<body>
<div id="kotak">Hello</div>
</body>
</html>
Keterangan :
- -moz-transition:all .5s;
-moz-transition : pernyataan untuk memberi transition (durasi) pada Browser Firefox.
all : diterapkan pada semua bagian objek
.5s : waktu transisi ke bentuk yang lain adalah 0.5 detik. - -moz-transform:rotate(80deg);
-moz-transform : pernyataan untuk memberi efek transform pada Browser Firefox.
rotate : efek transform yang diberikan adalah efek perputaran.
80deg : perputaran ebjek sebesar 80 derajat.
Dengan kreatifitas, Anda dapat membuat animasi lainnya untuk mendesain web yang indah. Untuk memberikan pengetahuan tambahan dan semangat belajar, berikut silahkan Anda lihat kreasi animasi menggunakan Property Transition dan Transform yang ada di CSS 3.
Kreasi Menggunakan CSS 3
CSS 3 Social Icons
Menu Navigasi Efek Zoom
CSS 3 Image Galery
