Poster swing plugin can be used for adding poster swing effect on html elements. The plugin uses rotation transform for adding the swing effect. See http://caniuse.com/#feat=transforms2d to check which browser will support this.

Usage

You must include jQuery.js and jquery.posterSwing.js (or jquery.posterSwing.min.js) in you web page in order to use this plugin.

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.posterSwing.min.js" type="text/javascript"></script>

For adding poster swing effect to any html element, use following with jQuery selector -

$(function () {            
    $("#myDiv").posterSwing([options]);
});

Currently following options are available -

• duration : (default value 4000)
  total duration (in milliseconds) for which the animation will run.
   
• angle : (default value 30)
  max angle to which the swing will be done.
   
• swingCenter : (default value top center = 50% 5%)
  x, y value of the center around which swing will be done - can be in px or %.

Demo

$(element).posterSwing();

$(element).posterSwing({
    angle: 10
});

$(element).posterSwing({
    duration: 2000,
    angle: 10
});

$(element).posterSwing({
    duration: 16000
});

$(element).posterSwing({
    swingCenter: "50% 50%"
});

$(element).posterSwing({
    swingCenter: "50% 100%"
});

$("body").posterSwing({
    duration: 2000,
    angle: 10
});

/*
  this code will be 
  poster swing
*/
$(this).next("pre")
  .posterSwing();

$(this).posterSwing();

You can view full usage and demonstration on the demo page - http://demo.com