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> 
  <div class="back">
    Back content
  </div> 
</div>  

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

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="jquery.rotator.js"></script>

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

$(function(){
  $('.rotator').flipIt();
});

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

$('.rotator').flipIt({

  // 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.