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 sobat

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