css3 transition

December 2, 2011 at 4:03 am | blog, CSS3, tipstrick | 3 comments

Untuk mendapatkan efek hover pada suatu objek biasanya kita menggunakan javascript atau memakai flash. tapi dengan cs3 kita bisa mendapatkan hal tersebut. Kita bisa membuat efek berputar, di zoom atau di geser. Dengan efek easing yang biasanya memakai jquery.

&lt;div id="tran"&gt;
&lt;a href="index.html"&gt;&lt;h1&gt;Your Logo&lt;/h1&gt;&lt;/a&gt;
&lt;/div&gt;

</div>

CSS :

#tran h1 { width:  290px;

margin: 0 auto;

background: #000;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

-ms-transition: all 1s ease-in-out;

height: 100px;  }

&nbsp;

#tran h1:hover {background: #333;

-webkit-transform: rotate(5deg) scale(1.05);

-moz-transform: rotate(5deg) scale(1.05);

-o-transform: rotate(5deg) scale(1.05);

-ms-transform: rotate(5deg) scale(1.05); }

#tran h1 { width: 290px;

margin: 0 auto;

background: #000;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

-ms-transition: all 1s ease-in-out;

height: 100px; }

#tran h1:hover {background: #333;

-webkit-transform: rotate(5deg) scale(1.05);

-moz-transform: rotate(5deg) scale(1.05);

-o-transform: rotate(5deg) scale(1.05);

-ms-transform: rotate(5deg) scale(1.05); }

Penjelasannya :

Tekhnik css di atas di gunakan untuk menampilkan animasi ease in out logo tag <h1>, dan saat posisi hover (mouse di atas object). maka akan di putar 5derajad

 rotate(5deg)

1	rotate(5deg)

. Dan akan di perbesar skalanya

 scale(1.05)

1	scale(1.05)

Dengan tekhnik ini anda bisa membuat efek memutar text bisa sampai 360 derajad sserta bisa di zoom atau di perbesar. untuk kecepatan efectnya bisa anda sesuaikan sendiri pada bagian ini