Kali ini saya akan membagikan sebuah plugin yang mungkin tidak asing lagi dimata para web dev dan sangat asing dimata para newbie seperti saya, yaitu sebuah plugin text rotator yang berfungsi untuk mengganti sebuah text tertentu dengan text yang lain sesuai yang ditentukan.

Sebenarnya mungkin artikel ini tidak bermakna dan plugin ini jarang dipakai, namun ini hanya sebagai dokumentasi. :)

berikut adalah kodenya :

<script type='text/javascript' src="//googledrive.com/host/0B22vSZUsgbQfcDJPbGhFZGh5d1U/jquery.simple-text-rotator.min.js"></script>

<div class="main">
    <h1 class="demo">Caranya <span class="rotate">text, dipisahkan, koma</span> ok</h1>
</div>

.rotating {
  display:inline-block;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d;
  -webkit-transform:rotateX(0) rotateY(0) rotateZ(0);
  -moz-transform:rotateX(0) rotateY(0) rotateZ(0);
  -ms-transform:rotateX(0) rotateY(0) rotateZ(0);
  -o-transform:rotateX(0) rotateY(0) rotateZ(0);
  transform:rotateX(0) rotateY(0) rotateZ(0);
  -webkit-transition:.5s;
  -moz-transition:.5s;
  -ms-transition:.5s;
  -o-transition:.5s;
  transition:.5s;
  -webkit-transform-origin-x:50%;
}
.rotating.flip {position:relative;}
.rotating .front,
.rotating .back {
  left:0;
  top:0;
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  -ms-backface-visibility:hidden;
  -o-backface-visibility:hidden;
  backface-visibility:hidden;
}
.rotating .front {
  position:absolute;
  display:inline-block;
  -webkit-transform:translate3d(0,0,1px);
  -moz-transform:translate3d(0,0,1px);
  -ms-transform:translate3d(0,0,1px);
  -o-transform:translate3d(0,0,1px);
  transform:translate3d(0,0,1px);
}
.rotating.flip .front {z-index:1;}
.rotating .back {
  display:block;
  opacity:0;
}
.rotating.spin {
  -webkit-transform:rotate(360deg) scale(0);
  -moz-transform:rotate(360deg) scale(0);
  -ms-transform:rotate(360deg) scale(0);
  -o-transform:rotate(360deg) scale(0);
  transform:rotate(360deg) scale(0);
}
.rotating.flip .back {
  z-index:2;
  display:block;
  opacity:1;
  -webkit-transform:rotateY(180deg) translate3d(0,0,0);
  -moz-transform:rotateY(180deg) translate3d(0,0,0);
  -ms-transform:rotateY(180deg) translate3d(0,0,0);
  -o-transform:rotateY(180deg) translate3d(0,0,0);
  transform:rotateY(180deg) translate3d(0,0,0);
}
.rotating.flip.up .back {
  -webkit-transform:rotateX(180deg) translate3d(0,0,0);
  -moz-transform:rotateX(180deg) translate3d(0,0,0);
  -ms-transform:rotateX(180deg) translate3d(0,0,0);
  -o-transform:rotateX(180deg) translate3d(0,0,0);
  transform:rotateX(180deg) translate3d(0,0,0);
}
.rotating.flip.cube .front {
  -webkit-transform:translate3d(0,0,100px) scale(.9,.9);
  -moz-transform:translate3d(0,0,100px) scale(.85,.85);
  -ms-transform:translate3d(0,0,100px) scale(.85,.85);
  -o-transform:translate3d(0,0,100px) scale(.85,.85);
  transform:translate3d(0,0,100px) scale(.85,.85);
}
.rotating.flip.cube .back {
  -webkit-transform:rotateY(180deg) translate3d(0,0,100px) scale(.9,.9);
  -moz-transform:rotateY(180deg) translate3d(0,0,100px) scale(.85,.85);
  -ms-transform:rotateY(180deg) translate3d(0,0,100px) scale(.85,.85);
  -o-transform:rotateY(180deg) translate3d(0,0,100px) scale(.85,.85);
  transform:rotateY(180deg) translate3d(0,0,100px) scale(.85,.85);
}
.rotating.flip.cube.up .back {
  -webkit-transform:rotateX(180deg) translate3d(0,0,100px) scale(.9,.9);
  -moz-transform:rotateX(180deg) translate3d(0,0,100px) scale(.85,.85);
  -ms-transform:rotateX(180deg) translate3d(0,0,100px) scale(.85,.85);
  -o-transform:rotateX(180deg) translate3d(0,0,100px) scale(.85,.85);
  transform:rotateX(180deg) translate3d(0,0,100px) scale(.85,.85);
}

$(document).ready(function () {
    $(".demo .rotate").textrotator({
        animation: "fade",
        speed: 1000
    });
});

dan untuk melihat previewnya silahkan lihat dibawah ini :
Sekian tutorial kali ini, semoga bisa bermanfaat. :)