Jumat, 03 Oktober 2014

Roll-Spin Effect (Efek Berputar) Pada Gambar

Roll-Spin Effect (Efek Berputar) Pada Gambar - Pada artikel sebelumnya saya telah membuat efek berputar pada teks atau tulisan dan pada artikel ini saya mencoba mengembangkan kode yang ada pada efek teks berputar tersebut dipasang dan diganti dengan gambar, sehingga gambar akan memiliki efek berputar juga

Roll-Spin Effect (Efek Berputar) Pada Gambar

Untuk membuat Efek Berputar Pada Gambar ini, sebelumnya Anda harus memasang kode CSS Roll-Spin Effect yang ada pada artikel sebelumnya yaitu Efek Berputar Pada Teks

Selanjutnya tambahkan kode berikut ini
#roll-spin img {
position:absolute;
border:1px solid #ccc;
}
#roll-spin .img1a {
-webkit-transform:rotateY(0deg) translateX(180px);
padding:0 0 0 160px;
height:160px;
width:200px;
}
#roll-spin .img2a {
-webkit-transform:rotateY(-76deg) translateX(180px);
padding:0 0 0 147px;
height:160px;
width:213px;
}
#roll-spin .img3a {
-webkit-transform:rotateY(-148deg) translateX(180px);
padding:0 0 0 120px;
height:160px;
width:
240px;
}
#roll-spin .img4a {
-webkit-transform:rotateY(-220deg) translateX(180px);
padding:0 0 0 147px;
height:160px;
width:213px;
}
#roll-spin .img5a {
-webkit-transform:rotateY(-292deg) translateX(180px);
padding:0 0 0 122px;
height:160px;
width:238px;
}

Kode HTML
<div id="roll-bg" style="padding-left: 180px; height: 160px;">
<div id="roll-spin" style="-webkit-transform-origin: 180px 0 0;">
<img class="img1a" src="http://1.bp.blogspot.com/-fZ_6BCGN1vs/VC3YeZmt4II/AAAAAAAAFqk/Oe_On1J8XtQ/s1600/alexa.png" />
</div>
</div>

*Ganti URL Gambanya

Efek Berputar Gambar

Bagaimana jika gambarnya ada dua?
Gunakan kode HTML berikut ini
<div id="roll-bg" style="padding-left: 180px; height: 160px;">
<div id="roll-spin" style="-webkit-transform-origin: 180px 0 0;">
<img class="img1a" src="http://1.bp.blogspot.com/-fZ_6BCGN1vs/VC3YeZmt4II/AAAAAAAAFqk/Oe_On1J8XtQ/s1600/alexa.png" />
<img class="img3a" src="http://4.bp.blogspot.com/-Eozr415G73c/VC3Ye5KQqcI/AAAAAAAAFqs/PAdHi4LUQFk/s1600/harga-blog.png" />
</div>
</div>

*Ganti URL Gambanya

Efek Berputar Gambar
Efek Berputar Gambar

Bagaimana jika gambarnya ada tiga?
Gunakan kode HTML berikut ini
<div id="roll-bg" style="padding-left: 180px; height: 160px;">
<div id="roll-spin" style="-webkit-transform-origin: 180px 0 0;">
<img class="img1a" src="http://1.bp.blogspot.com/-fZ_6BCGN1vs/VC3YeZmt4II/AAAAAAAAFqk/Oe_On1J8XtQ/s1600/alexa.png" />
<img class="img2a" src="http://4.bp.blogspot.com/-36SFnoAvZfI/VC3Yeo9hQ_I/AAAAAAAAFqo/NQmhc-7DXy8/s1600/google-pagerank.png" />
<img class="img3a" src="http://4.bp.blogspot.com/-Eozr415G73c/VC3Ye5KQqcI/AAAAAAAAFqs/PAdHi4LUQFk/s1600/harga-blog.png" />
</div>
</div>

*Ganti URL Gambanya

Efek Berputar Gambar
Efek Berputar Gambar
Efek Berputar Gambar

Bagaimana jika gambarnya ada banyak?
Gunakan kode HTML berikut ini
<div id="roll-bg" style="padding-left: 180px; height: 160px;">
<div id="roll-spin" style="-webkit-transform-origin: 180px 0 0;">
<img class="img1a" src="http://1.bp.blogspot.com/-fZ_6BCGN1vs/VC3YeZmt4II/AAAAAAAAFqk/Oe_On1J8XtQ/s1600/alexa.png" />
<img class="img2a" src="http://4.bp.blogspot.com/-36SFnoAvZfI/VC3Yeo9hQ_I/AAAAAAAAFqo/NQmhc-7DXy8/s1600/google-pagerank.png" />
<img class="img3a" src="http://4.bp.blogspot.com/-Eozr415G73c/VC3Ye5KQqcI/AAAAAAAAFqs/PAdHi4LUQFk/s1600/harga-blog.png" />
<img class="img4a" src="http://1.bp.blogspot.com/-U7yDRUc9Qy8/VC3YfjuzwkI/AAAAAAAAFq8/R7s3zZVvh10/s1600/seo-score.png" />
<img class="img5a" src="http://4.bp.blogspot.com/-Eozr415G73c/VC3Ye5KQqcI/AAAAAAAAFqs/PAdHi4LUQFk/s1600/harga-blog.png" />
</div>
</div>

*Ganti URL Gambanya

Efek Berputar Gambar
Efek Berputar Gambar
Efek Berputar Gambar
Efek Berputar Gambar
Efek Berputar Gambar




Bagaimana jika dipasang link pada gambar?
Sama seperti pemasangan link pada umumnya, cukup menambahkan alamat url pada gambar
<a href="Url-Permanen"><img class="img1a" src="Url-Gambar" /></a>
*Ganti URL Permanen dan URL Gambanya

Efek Berputar Gambar

Bagaimana jika di isi dengan Video?
Untuk membuat efek berputar pada tampilan video masih belum saya coba, mungkin untuk pengembangan selanjutnya akan saya buatkan :)

Untuk tampilan efek berputar pada gambar ini memang belum terlihat sempurna karena tampilannya masih bertingkat dan belum sejajar antara gambar yang satu dengan yang lainnya

Roll-Spin Effect (Efek Berputar) Pada Gambar Rating: 4.5 Diposkan Oleh: ana sriwahyuni

2 komentar:

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia