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.
|
1 2 3 |
<div id="tran">
<a href="index.html"><h1>Your Logo</h1></a>
</div> |
CSS :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
#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
|
1 |
rotate(5deg) |
|
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
|
1 |
all 1s ease-in-out; |
untuk previewnya silahkan lihat di website alurkria.com
Sekian selamat mencoba…!
like dis om … nambah ilmu cs3 na uy
aRai recently posted..Menampar dan Ditampar
Keren om agus..
Salam kenal
salam kenal juga mas’e
omagus recently posted..css3 transition