🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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.

Rotate Flip

Documentation

Elemental Dimensionizer

A small jQuery-based function for transforming elements in multiple dimensions based on cursor position.

VIEW DEMO: https://greyforestmedia.github.io/ElementalDimensionizer/

Demonstration

OPTIONS

  • dimension-x-inverse: invert x rotation
  • dimension-y-inverse: invert y rotation
  • dimension-x-sensitivity: sensitivity of x rotation
  • dimension-y-sensitivity: sensitivity of y rotation

USAGE

Create a parent element to hold the layers

<div id="element"> 

Apply "element-dimension" class to desired layers

<h2 class="element-dimension" 

Add optional data attributes

data-dimension-x-inverse="true" data-dimension-x-sensitivity="2" data-dimension-y-inverse="false" data-dimension-y-sensitivity="3" 

Include layer text/img/etc and close parent element

>Greyforest Elemental Dimensionalizer</h2></div> 

Initialize script and target parent element

  • element: set ID of parent element that contains layers
  • log: true or false for small box to display coordinates legend

<script> ElementalDimensionizer(element, log); </script>


You May Also Like