Kumpulan Trick Blog TErbaru

About

New Trick hayalah blog kecil yang mencoba untuk memberikan dan menyajikan trick dan tips tentang blog
Minggu, 02 Oktober 2016

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 sobat 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




Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@

TOP