Customizable Element Rotator - jquery.rotator.js

File Size: 4.48 KB
Views Total: 3327
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Customizable Element Rotator - jquery.rotator.js

The jquery.rotator.js plugin applies a configurable flip/rotate animation to a block element that can be used to reveal the front/back content when a given event is triggered. Supports either Vertical or Horizontal rotation.

How to use it:

1. Add front/back content to the rotator element.

<div class="rotator"> 
  <div class="front"> 
    Front content
  <div class="back">
    Back content

2. Import both jQuery library and jquery.rotator.js script into the document.

<script src="" 
<script src="jquery.rotator.js"></script>

3. Calling the function flipIt() will apply a default flip animation to the rotator element on click.


4. Config the plugin by overriding the following optional settings.


  // CSS perspective property
  perspective: 1000,

  // background color
  background: '#fff',

  // trigger event
  trigger: 'click',

  // duration of rotate animation
  rotateduration: 0.5,

  // duration of scale animation
  scaleduration: 1,

  // scale level
  scale: 1.2,

  // CSS transiton
  transition: 'ease-out',

  // or 'horizontal'
  direction: 'vertical',

  // width/height of rotator
  width: 300, 
  height: 150,

  // selectors
  front: '.front',
  back: '.back'


This awesome jQuery plugin is developed by reinkarnator. For more Advanced Usages, please check the demo page or visit the official website.