Mei 30, 2012

8 Arah Efek Hover Suatu Objek Dengan transform: translate

Situseo Blog : Begitu banyaknya jenis efek hover pada css tentu akan memberikan banyak pilihan, dibawah ini ada beberapa contoh efek hover suatu objek dalam berbagai arah, tentunya ini merupakan sebagian kecil dari banyaknya jenis efek hover pada css, semoga dengan variatifnya efek hover yang ada bisa menjadi masukan untuk menghasilkan suatu karya yang lebih unik.

Efek hover dibawah ini menggunakan transform:translate untuk menghasilkan efek hover pada suatu objek ke arah Kiri, Kanan, Atas, Bawah, Kiri Atas, Kiri Bawah, Kanan Atas dan Kanan Bawah atau bisa disebut 8 arah mata angin. Efek hover ini berjalan halus karena dengan tambahan efek transition pada scriptnya, bagaimana hasil dari efek hover tersebut?. Sebaiknya untuk melihat hasil secara maksimal untuk efek ini pergunakan google chrome sebagai browsernya.

Efek Hover Arah Kiri Untuk Objek


Objek


.dalang_kiri: {
background: #808080;
color: #666;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 12px;
border-radius: 3px;
-webkit-transition: all 0.65s ease-in-out;
-moz-transition: all 0.65s ease-in-out;
-o-transition: all 0.65s ease-in-out;
transition: all 0.65s ease-in-out;
}
.dalang_kiri:hover {
-webkit-transform: translate(-50px, 0px);
-moz-transform: translate(-50px, 0px);
-o-transform: translate(-50px, 0px);
-transform: translate(-50px, 0px);
}

transition merupakan jangka waktu perpindahan suatu objek yang diukur dengan second, lebih besar angkanya akan menghasilkan efek perpindahan lebih lambat. Untuk script css selanjutnya saya anggap kode transition ada didalamnya.

Efek Hover Arah Kanan Untuk Objek


Objek


.dalang_kanan:hover {
-webkit-transform: translate(50px, 0px);
-moz-transform: translate(50px, 0px);
-o-transform: translate(50px, 0px);
-transform: translate(50px, 0px);
}

Efek Hover Arah Atas Untuk Objek


Objek


.dalang_atas:hover {
-webkit-transform: translate(0px, -50px);
-moz-transform: translate(0px, -50px);
-o-transform: translate(0px, -50px);
-transform: translate(0px, -50px);
}

Efek Hover Arah Bawah Untuk Objek


Objek


.dalang_bawah:hover {
-webkit-transform: translate(0px, 50px);
-moz-transform: translate(0px, 50px);
-o-transform: translate(0px, 50px);
-transform: translate(0px, 50px);
}

Efek Hover Arah Kiri Atas Untuk Objek


Objek


.dalang_kiriatas:hover {
-webkit-transform: translate(-50px, -50px);
-moz-transform: translate(-50px, -50px);
-o-transform: translate(-50px, -50px);
-transform: translate(-50px, -50px);
}

Efek Hover Arah Kiri Bawah Untuk Objek


Objek


.dalang_kiribawah:hover {
-webkit-transform: translate(-50px, 50px);
-moz-transform: translate(-50px, 50px);
-o-transform: translate(-50px, 50px);
-transform: translate(-50px, 50px);
}

Efek Hover Arah Kanan Atas Untuk Objek


Objek


.dalang_kananatas:hover {
-webkit-transform: translate(50px, -50px);
-moz-transform: translate(50px, -50px);
-o-transform: translate(50px, -50px);
-transform: translate(50px, -50px);
}

Efek Hover Arah Kanan Bawah Untuk Objek


Objek


.dalang_kananbawah:hover {
-webkit-transform: translate(50px, 50px);
-moz-transform: translate(50px, 50px);
-o-transform: translate(50px, 50px);
-transform: translate(50px, 50px);
}

Itulah sedikit contoh efek hover transform: translate dari 8 arah pergeseran yang bisa dipergunakan untuk mempercantik tampilan efek blog.

Semoga bermnafaat,

6 Diskusi untuk 8 Arah Efek Hover Suatu Objek Dengan transform: translate

31 Mei 2012 20.52  

wow keren...keren banget

1 Juni 2012 16.57  

weww keren nih..oww iya sobat..bisa ga q minta/beli templatenya keren abis sobat.....

19 Juni 2012 12.41  

Wau hovernya kanan kiri ok nie.......? :D

12 Juli 2012 19.17  

Mantap banget ni infonya, terimakasih infonya keren.. keren..!

15 Juli 2012 20.30  

makasih informasinya sangat bermanfaat sekali

7 November 2012 21.28  

tutorial nya mantep bgt,,
bermanfaat sekali,,
thx gan sudah share ilmunya,, :)

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top