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

Rotate js using CSS translate3d and transitionNo dependenciesWorks in all major browsers that support CSS translate3d or transition (IE9+)Works on tablet PC

Animation Core Java Script

Documentation

cm-rotate.js

alt text

Rotate js using CSS translate3d and transition

  • No dependencies
  • Works in all major browsers that support CSS translate3d or transition (IE9+)
  • Works on tablet PC
  • MIT License

Example

http://cmiscm.github.com/cm-rotate.js/

Usage

Download the js file and include it in your html.

    <script type="text/javascript" src="CMRotate.js"></script>

Add CMRotate.init function in your Javascript code.

    /**      * Background image Array for each Plane      */     var backgroundImages = ["images/img1.jpg", "images/img2.jpg", "images/img3.jpg", ...];      /**      * init      *      * div - DIV element ID      * tw - Plane Width      * th - Plane Height      * ty - Y position distance from bottom      * gap - Gap between each Plane      * radius - Circle Radius      * bg - Background image Array      * fn - Mouse click function on each Plane      */     CMRotate.init('rotate-div', 200, 300, 100, 12, 600, backgroundImages, clickFn);      /**      * Click function      */     function clickFn(no) {         alert('click no - ' + (no + 1));     }

Dispose

Remove all events and requestAnimationFrame

    CMRotate.dispose();

Questions

If you have any questions, please feel free to ask on my blog

License

Copyright (c) 2013 Jongmin Kim (http://cmiscm.com)

Licensed under the MIT license.


You May Also Like