Interactive Element Rotate Animation - jQuery Elemental Dimensionizer

The Elemental Dimensionizer jQuery plugin applies a CSS Transform based interactive rotate/flip effect to any HTML object that reacts to mousemove and touchmove events.

How to use it:

1. Add the CSS class 'element-dimension' to elements you want to rotate. And set the sensitivity and sensitivity options for each layer using data attributes as follows:

<div id="element">

  <h2 class="element-dimension"
      data-dimension-x-inverse="true" 
      data-dimension-x-sensitivity="2" 
      data-dimension-y-inverse="false" 
      data-dimension-y-sensitivity="3">
      Elemental Dimensionalizer
  </h2>

  <img class="element-dimension" 
      data-dimension-x-inverse="true" 
      data-dimension-x-sensitivity="2" 
      data-dimension-y-inverse="false" 
      data-dimension-y-sensitivity="1"
      src="image.jpg">
      
</div>

2. Load both jQuery library and the jQuery Elemental Dimensionizer plugin in the html document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="GreyforestElementalDimensionizer.js"></script>

3. Initialize the jQuery Elemental Dimensionizer plugin and done.

ElementalDimensionizer('#element', false);

4. If the log parameter is set to true, the plugin will display the current coordinates on the webpage.

ElementalDimensionizer('#element', true);

---

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