KianHome - Perkembangan CSS3 saat ini sudah sangat terasa luar biasa, dimana sebuah efek bisa ditambahkan hanya dengan menggunakan kode CSS saja didalamnya tanpa ada tambahan kode Java dan animasi flash didalamnya.

Untuk saat ini kita akan membahas mengenai "Efek Transition dengan CSS3", simak tutorialnya berikut ini :

Efek Transisi atau efek perubahan pada pola dasar ke pola yang ditambahkan dengan efek transisi, dirasakan sama baik dengan menggunakan pola kode java sekalipun. Berikut ini adalah kode Transisi berputar dengan pola 180 derajat.

.test{padding:10px;
width:100px;
height:100px;
background:#f2d2d2;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s,
-moz-transform 2s; /* Firefox 4 */}

.test:hover{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg);

Penjelasan:
Dari contoh kode diatas didapati pola dalam membuat efek itu sendiri tidaklah sulit, hanya beberapa kode yang harus diperhatikan,

transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s,
-moz-transform 2s;

Pada kode diatas terdapat kode yang berwarna merah, dimana itu menunjukkan kecepatan dari efek transisi yang akan diberi. Pada kode diatas kecepatannya adalah 2s atau 2 second. Jika kamu ingin membuat efek lebih cepat maka kecepatannya dibuat lebih kecil, ingin lebih lambat atau slow kecepatannya dibuat lebih besar.

-moz-transform:rotate(180deg)

Karena efek transisi yang digunakan adalah pola rotasi (berputar) maka kita menggunakan perintah memutar dengan perhitungan dalam derajat. seperti contoh box yang dibuat menggunakan rotasi 180 derajat, jika efek yang diberikan ingin cantik sebaiknya gunakan beberapa variasi untuk rotasinya. Bisa dengan efek 360 derajat, 200 derajat atau berapapun sesuai dengan keinginan dari kamu.

Selamat mencoba..

Kode diatas hanya berjalan pada Browser Firefox saja, Untuk beberapa browser yang biasa kamu gunakan bisa juga ditambahkan kode berwarna "orange" sebagai berikut:

.test{padding:10px;
width:100px;
height:100px;
background:#f2d2d2;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s,
-moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
.test:hover{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */}