hari ini CSS didapat atas kebaikan Gunjesh Kumar dan apa yang akan Anda temukan  adalah bagaimana Anda dapat membuat gambar muncul seperti itu bergulir ke sisi lain dari layar atau wadah. Anda akan mencapai efek ini dengan menggunakan CSS ini salah satu cara yang lebih baik untuk menunjukkan Sebuah efek Roller dibandingkan dengan menggunakan gambar bola.

 

Berikut kodenya :

CSS

.roller
{
 width: 850px;
 height: 200px;
}
.roller img
{
 float: left;
 border-radius: 50%;
 width: 200px;
 height: 200px;   
 transition: 1s Ease;
}
.roller:hover img
{
 transform: translate(630px, 0px) rotate(360deg);
}     

Kelas rol digunakan untuk menentukan lebar dan tinggi ruang bahwa bola 

akan melakukan perjalanan dalam, dalam hal ini, itu 850px lebar.

Border-radius diatur ke 50% untuk membuat putaran gambar, 

sedangkan waktu transisi untuk bola untuk menyelesaikan efek diatur ke 1 detik.

Properti transform yang bertanggung jawab untuk mencapai efek bergulir menggunakan 

menerjemahkan dan memutar. The 360deg nilai menentukan jumlah rotasi bola akan tampil  

sedangkan 630px pada dasarnya jarak bola akan melakukan perjalanan dari titik A ke titik B.

Anda dapat mengatur kemana arah perputaran efek tersebut.

dan juga mengkreasikan sebagai tuntunan Lihat Demonya !

Sekaligus Sumber dari tema saya hari ini.