jQuery Plugin For Rotating Html Elements - multirotation

File Size: 221KB
Views Total: 5449
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Rotating Html Elements - multirotation

multirotation is a simple jQuery plugin that allows to rotate any html elements by a given angle and direction.

Basic Usage:

1. Include jQuery library and jQuery multirotation on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.multirotation-1.0.0.js"></script>

2. Create some buttons for controlling the rotation

<input title="+45 deg" type="button" onclick="return plus('#img_test');" value="+rotate"/>
<input title="-45 deg" type="button" onclick="return minus('#img_test');" value="-rotate"/>
<input title="set to 0 deg" type="button" onclick="return reset('#img_test');" value="reset"/>

3. The HTML

<div id="img_test" class="rotable"><img alt="" src="1.png" /></div>

4. The javascript

<script type="text/javascript">
function plus(id) {
  $(id).rotate({ angle: 45 });
  get(id);
  return false;
}

function minus(id) {
  $(id).rotate({ angle: 90, direction: false });
  get(id);
  return false;
}

function reset(id) {
  $(id).clearRotation();
  get(id);
  return false;
}
</script>

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