Recent Articles

Rotate image, photo or object using JavaScript – Animation

With the introduction of Web 2.0; webpages are becoming more and more interactive, rich in usability, touch and gesture responsive. Animations are now invitable part of the Web and are useful in conveying the content in easy and interactive way. It also keeps users glued to the page and the website. In previous tutorial , I had explained disc rotation animation using Kinetic Js. This tutorial explains how to rotate image,photo or object around its axis using Propeller JS which can be controlled by mouse and is sensitive to touch (mobile) devices. Tap on the following image to open the demo page.

 

rotate-object-javascript

 

Implementation

1. Create HTML page 

In the above code; the viewport property of the document is set in proportion to the device width. All the necessary files like turbine.css, propeller.js and turbine.css are included.

2. Create CSS file for the styling.

We will be creating ‘turbine.css’ to create the styling properties of the document and the turbine (Fan). The required code is

3. Fan/Turbine speed options

The Fan speed and other behaviours can be controlled with the following options.

  • inertia is a number between 0 or 1. 0 means no rotation after mouse was released. 1 means infinite rotation.
  • speed – initial speed of rotation. It also can be used as property in runtime.
  • step allows to set step in degrees for stepwise mode.
  • stepTransitionTime enables CSS transition to move from step to step. This makes steps smooth and allows to use CSS transitions easing.
  • stepTransitionEasing CSS easing mode for transition when in stepwise mode and stepTransitionTime is more than zero. More easing functions can be found here.
  • onRotate callback executed when rotated. Current angle can be retrieved by using this.angle property inside the callback function.

Thats it. You can replace any image (instead of turbine/fan) and use this code create rich animation of an image or object which can rotate around its axis. More demos can be found on its developer’s page.

Live demo   Download Source

  • Erwan

    Thanks a lot for sharing, that’s really useful.