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/AVvXsEjX1y14ltNH0wZRpD6ywwq4_-H5J2LhEaPnH8Y8U3-p4R8vOyLGzeKj123trCv6x8QGCFiUZtXSCYvGOYR30HaX68L95GIuQZz6NqMwRNaoBRaxEK-1W4OxCt1s9VOp9zXhBWj_8Xkij4U/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/AVvXsEjX1y14ltNH0wZRpD6ywwq4_-H5J2LhEaPnH8Y8U3-p4R8vOyLGzeKj123trCv6x8QGCFiUZtXSCYvGOYR30HaX68L95GIuQZz6NqMwRNaoBRaxEK-1W4OxCt1s9VOp9zXhBWj_8Xkij4U/s1600/alexa.png" />
<img class="img3a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk5IES8_nkI0q1clAkWappoWkxa3A6sjx8cRoZ1eV4Bm-0XWPhNbUkiW7XAkzwQ7Lgd2WEo-yAYXP7SlUmeg8HD6w6Gy83N_kjNzas6jErOd3e-bRZKsL7cWj9YzxOXLJ-C9iZWsJLxdQ/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/AVvXsEjX1y14ltNH0wZRpD6ywwq4_-H5J2LhEaPnH8Y8U3-p4R8vOyLGzeKj123trCv6x8QGCFiUZtXSCYvGOYR30HaX68L95GIuQZz6NqMwRNaoBRaxEK-1W4OxCt1s9VOp9zXhBWj_8Xkij4U/s1600/alexa.png" />
<img class="img2a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8gJrw8ajelqEprC_02lMbqpbb2-ukWD_HHqy_WubfJzivWd71Qh6G08lAOpKo33gsBmmiG0_dhzSjwpKV2IwbH12Iuotf8jrvRWJma6Hg1RZmHpeCbP-RguPOcwJqaxkcFBhI83S79KI/s1600/google-pagerank.png" />
<img class="img3a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk5IES8_nkI0q1clAkWappoWkxa3A6sjx8cRoZ1eV4Bm-0XWPhNbUkiW7XAkzwQ7Lgd2WEo-yAYXP7SlUmeg8HD6w6Gy83N_kjNzas6jErOd3e-bRZKsL7cWj9YzxOXLJ-C9iZWsJLxdQ/s1600/harga-blog.png" />
</div>
</div>
*Ganti URL Gambanya

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/AVvXsEjX1y14ltNH0wZRpD6ywwq4_-H5J2LhEaPnH8Y8U3-p4R8vOyLGzeKj123trCv6x8QGCFiUZtXSCYvGOYR30HaX68L95GIuQZz6NqMwRNaoBRaxEK-1W4OxCt1s9VOp9zXhBWj_8Xkij4U/s1600/alexa.png" />
<img class="img2a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8gJrw8ajelqEprC_02lMbqpbb2-ukWD_HHqy_WubfJzivWd71Qh6G08lAOpKo33gsBmmiG0_dhzSjwpKV2IwbH12Iuotf8jrvRWJma6Hg1RZmHpeCbP-RguPOcwJqaxkcFBhI83S79KI/s1600/google-pagerank.png" />
<img class="img3a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk5IES8_nkI0q1clAkWappoWkxa3A6sjx8cRoZ1eV4Bm-0XWPhNbUkiW7XAkzwQ7Lgd2WEo-yAYXP7SlUmeg8HD6w6Gy83N_kjNzas6jErOd3e-bRZKsL7cWj9YzxOXLJ-C9iZWsJLxdQ/s1600/harga-blog.png" />
<img class="img4a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj38mfyW03_L-7hh6Xk-w4R3Dgb7H7jNwMKSTDakVdHaR8I2rQIohxpoSnel5wSa8CZM_Ek54v3SpubxrBmcAYP9eYxwu8clVl_vrn66GqjcnRfuyPse_qNWX6qzvjJ23244bf5a0mKWM4/s1600/seo-score.png" />
<img class="img5a" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk5IES8_nkI0q1clAkWappoWkxa3A6sjx8cRoZ1eV4Bm-0XWPhNbUkiW7XAkzwQ7Lgd2WEo-yAYXP7SlUmeg8HD6w6Gy83N_kjNzas6jErOd3e-bRZKsL7cWj9YzxOXLJ-C9iZWsJLxdQ/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

Membuat Roll-Spin Effect (Efek Berputar) Pada Teks

Membuat Roll-Spin Effect (Efek Berputar) Pada Teks - Saya tidak tahu apa nama efek yang saya buat ini, karena adanya hasil efek berputar maka saya menamakannya "Roll Spin Effect" - Roll adalah gulungan dan Spin adalah berputar. Jadi seperti itulah, entah nyambung atau tidak yang penting efek dari hasilnya adalah berputar. Selain menimbulkan efek berputar pada teks, efek lainnya adalah bisa menghentikan efek berputar tersebut dengan mengarahkan kursor mouse

Membuat roll-spin effect atau efek berputar pada teks ini hanya menggunakan sedikit kode CSS dan tanpa script sama sekali sehingga tidak akan memperberat loading blog Anda

Baca juga

DEMOnya dibawah ini ya..

Roll-Spin atau Berputar-putar

Cara Membuat Roll-Spin Effect (Efek Berputar) Pada Teks
Salin kode CSS berikut ini kedalam template blog

#roll-bg {
margin:1em auto;
-webkit-perspective:1200px;
-moz-perspective:1200px;
-ms-perspective:1200px;
perspective:1200px;
}
#roll-bg p {
font-size:30px;
text-align:center;
color:#444;
padding:10px 0;
}
#roll-spin {
-webkit-animation-name:roll-spin;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-duration:6s;
animation-name:roll-spin;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-duration:6s;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
}
#roll-spin:hover {
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
@-webkit-keyframes roll-spin {
from {-webkit-transform:rotateY(0deg);}
to {-webkit-transform:rotateY(-360deg);}
}
@keyframes roll-spin {
from {-moz-transform:rotateY(0deg);
-ms-transform:rotateY(0deg);
transform:rotateY(0deg);}
to {-moz-transform:rotateY(-360deg);
-ms-transform:rotateY(-360deg);
transform:rotateY(-360deg);}
}

HTML
<div id="roll-bg">
<p id="roll-spin">
Roll-Spin atau Berputar-putar</p>
</div>

Kode diatas merupakan pengembangan dari efek jatuh yang pernah saya buat sebelumnya, silahkan baca di

Silahkan jika tertarik untuk membuat rool spin effect diatas, agar teks di blog Anda bisa berputar