[JS] cm-rotate.js

Lab | April 4, 2013 | 4 Comments

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
Download the js file and include it in your html.

Add CMRotate.init function in your Javascript code.

Remove all events and requestAnimationFrame
Copyright (c) 2013 Jongmin Kim
Licensed under the MIT license.


Massimo  April 17, 2013 at 4:20 AM

Hi, thank you for this piece of code!! That is exactly what I was searching for a project.
I’ve noticed a strange behavior on iPad: you can’t use twice this code. I mean I opened your fff site and the example on github and once I’ve used the rotation on fff, the github page stopped and did not respond, and vice versa.

Also I found you fff page menu a lot more smooth. Can I achieve the same smoothness with the code you’ve released?

Thanks again


    cmiscm  May 26, 2013 at 12:37 PM

    Hmmm that’s weird, it’s exactly same code that I’ve used on my FFF site.

Marco  May 6, 2015 at 7:31 AM

Hello Jong, I’m looking to enable the rotation with keypressing the arrow from the keyboard instead than use the dragging.

There’s a way to enabling this function?

Something like binding left and right arrow with a specific deltaX pixel or a single plane rotation?

My idea is to having something like hyperspin (see here https://www.youtube.com/watch?v=35S_gWYf_9c )
but realized only with html5 / HTA.

Your script is awesome, for my needs it only request some keyboard adjustment to perfect fit a frontend script.

An example to make all clear

if(e.keyCode == 37) { $(“#rotate-div”).animate({ left: “-=10” }); } // left arrow
if(e.keyCode == 39) { $(“#rotate-div”).animate({ left: “+=10” }); } // right arrow

Thank you in advance


Leave a Reply