Efek Hover 2
Anda Pengen Seperti Saya Efek Hover yang Puter puter gitu..
caranya Gampang.
Ikuti saja langkah berikut ini:
1. Anda Cari Dulu Kode ]]></b:skin> copykan kode dibawah ini tepat diatas kode
<style type='text/css'>
.stage {
margin: 0 auto;width: 210px;height: 140px;
position: relative;perspective: 1000px;}
#gallery {
width: 100%;height: 100%;
position: absolute;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
animation: rotation 20s infinite linear;
-webkit-animation: rotation 20s infinite linear;
-moz-animation: rotation 20s infinite linear;}
//menghentikan gerak putaran (hover mouse)...
#gallery:hover {
animation-play-state: paused;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;}
#gallery figure {
display: block;position: absolute;
width: 186px;height: 116px;
left: 10px;top: 10px;
background: black;overflow: hidden;
border: solid 5px #666;}
//peletakan serta pengaturan tampilan gambar...
#gallery figure:nth-child(1) {
transform: rotateY(0deg) translateZ(288px);
-webkit-transform: rotateY(0deg) translateZ(288px);
-moz-transform: rotateY(0deg) translateZ(288px);}
#gallery figure:nth-child(2) {
transform: rotateY(40deg) translateZ(288px);
-webkit-transform: rotateY(40deg) translateZ(288px);
-moz-transform: rotateY(40deg) translateZ(288px);}
//teruskan dengan selisih nilai rotateY(40deg) pada gambar berikutnya...
#gallery figure:nth-child(3) { ...}
#gallery figure:nth-child(4) { ...}
img{
-webkit-filter: grayscale(1);
cursor: pointer;
transition: all 1.5s ease;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;}
img:hover{
-webkit-filter: grayscale(0);
transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);}
@keyframes rotation{
from {transform: rotateY(0deg)}
to {transform: rotateY(360deg)}}
</style>
2. Lalu Anda Sekarang copykan dimanasaja sesuai anda inginkankan
yang penting bersatu dengan kode HTML
<figure><img src="http://URL-Gambar Anda (1).png" alt="..."></figure>
<figure><img src="http://URL-Gambar Anda (2).png" alt="..."></figure>
...
//dan seterusnya...
</div>
</div>
<figure><img src="http://URL-Gambar Anda (2).png" alt="..."></figure>
...
//dan seterusnya...
</div>
</div>
Keterangan :Warna hijau ganti dengan URL Gambar Anda
Yang alt="..." itu isi dengan bacaan yang ingin ditampilkan..
3. Selasai sudah
4. Tinggal Simpan
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuAOlWD0yyl9ihHLttFhqT-4NY5OdKvoQA2YX7ysEXhqWW3MhDUeguDKd513YwbgIx7iN1s6lpDfRUt3kdtIW_Mk1hwLweLKUkjhKiCZ7wfx2iBzGAeL9szTplbqLqowGhF7J7L6JLGlb8/w368-h91-no/signature_2.gif)
0 komentar: