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

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjai9FqaNkIMAIL9B5W5yZmtrRm-T5s7Y-2c9FIC6iG8G_ULSY6psfUXoiLikmiA5QmJ8s5HAiwKJXklJ_4j4mkTEg11k-JxmdTtW6ilZqY4kExbgy2a5TV77vU14o64eOUlSQvQDraugA/s1600/alexa.png" />
</div>
</div>
*Ganti URL Gambanya

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjai9FqaNkIMAIL9B5W5yZmtrRm-T5s7Y-2c9FIC6iG8G_ULSY6psfUXoiLikmiA5QmJ8s5HAiwKJXklJ_4j4mkTEg11k-JxmdTtW6ilZqY4kExbgy2a5TV77vU14o64eOUlSQvQDraugA/s1600/alexa.png" />
<img class="img3a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvg3QYyDDwqTIamrbFPRlZQfQ7shjcVz4J4l0YuiUz6TV1PXFY8DTXoMv5PFxkM-6J9Eha1v-_qqXtB0QxxVzxADYWpT-2vfbdQ_nCBhjrvmMFqphMtAEi_vin_g0YjaCg0UyuyJ9vokk/s1600/harga-blog.png" />
</div>
</div>
*Ganti URL Gambanya

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjai9FqaNkIMAIL9B5W5yZmtrRm-T5s7Y-2c9FIC6iG8G_ULSY6psfUXoiLikmiA5QmJ8s5HAiwKJXklJ_4j4mkTEg11k-JxmdTtW6ilZqY4kExbgy2a5TV77vU14o64eOUlSQvQDraugA/s1600/alexa.png" />
<img class="img2a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifvtSksbAlz7z-Xg_HcRK8gAfpE6NNbSiyaWD0AH5RBLl1ryJy-20HqkRM3gCwDECKKJBv4fu_1-mSMbc_UK3AH3Gy5NVvVc0tll43WXrZefWAhA9_dP3wm6gMZCjOq1BpzAVz4aoL_24/s1600/google-pagerank.png" />
<img class="img3a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvg3QYyDDwqTIamrbFPRlZQfQ7shjcVz4J4l0YuiUz6TV1PXFY8DTXoMv5PFxkM-6J9Eha1v-_qqXtB0QxxVzxADYWpT-2vfbdQ_nCBhjrvmMFqphMtAEi_vin_g0YjaCg0UyuyJ9vokk/s1600/harga-blog.png" />
</div>
</div>
*Ganti URL Gambanya

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjai9FqaNkIMAIL9B5W5yZmtrRm-T5s7Y-2c9FIC6iG8G_ULSY6psfUXoiLikmiA5QmJ8s5HAiwKJXklJ_4j4mkTEg11k-JxmdTtW6ilZqY4kExbgy2a5TV77vU14o64eOUlSQvQDraugA/s1600/alexa.png">



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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjai9FqaNkIMAIL9B5W5yZmtrRm-T5s7Y-2c9FIC6iG8G_ULSY6psfUXoiLikmiA5QmJ8s5HAiwKJXklJ_4j4mkTEg11k-JxmdTtW6ilZqY4kExbgy2a5TV77vU14o64eOUlSQvQDraugA/s1600/alexa.png" />
<img class="img2a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifvtSksbAlz7z-Xg_HcRK8gAfpE6NNbSiyaWD0AH5RBLl1ryJy-20HqkRM3gCwDECKKJBv4fu_1-mSMbc_UK3AH3Gy5NVvVc0tll43WXrZefWAhA9_dP3wm6gMZCjOq1BpzAVz4aoL_24/s1600/google-pagerank.png" />
<img class="img3a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvg3QYyDDwqTIamrbFPRlZQfQ7shjcVz4J4l0YuiUz6TV1PXFY8DTXoMv5PFxkM-6J9Eha1v-_qqXtB0QxxVzxADYWpT-2vfbdQ_nCBhjrvmMFqphMtAEi_vin_g0YjaCg0UyuyJ9vokk/s1600/harga-blog.png" />
<img class="img4a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1d_9nnB8IA9NMZYa5t3mszSHc-xuGqZMFii08OAYCrZeoKsCq0qH7-mIpRb6O-_kszvdw7JugXqKxrriDNe2Z9hM5Lrq-QH0fV3DEuj7kxErgNwcZWKpzYxwwQGrqWxnwuJLEaCOb3bA/s1600/seo-score.png" />
<img class="img5a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvg3QYyDDwqTIamrbFPRlZQfQ7shjcVz4J4l0YuiUz6TV1PXFY8DTXoMv5PFxkM-6J9Eha1v-_qqXtB0QxxVzxADYWpT-2vfbdQ_nCBhjrvmMFqphMtAEi_vin_g0YjaCg0UyuyJ9vokk/s1600/harga-blog.png" />
</div>
</div>
*Ganti URL Gambanya

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

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 2014-10-03T08:59:00+08:00 Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni