Rotate Elements Using JavaScript

We will be using the Propeller JavaScript library to rotate elements. It supports inertia and stepwise rotation and is also compatible with touch devices. To rotate an element you can simply drag or swipe.

Here is the demo of what we will make:

Let’s start with HTML:

<div class="webisora-demo">
        <p id="instructions"></p>
        <div id="container">
            <img id="rotate-this" src="images/paper-min.png" alt="" />
        </div>
</div>
<script src="./propeller.min.js"></script>

The p with id="instructions" is empty for now. We will populate the instruction, either “SWIPE TO ROTATE” for touch-enabled devices or “USE MOUSE TO DRAG AND ROTATE” for desktop or devices that do not support touch, using JavaScript.

Now, let’s add some CSS:

.webisora-demo {
    max-width: 350px;
    max-height: 400px;
 }
#rotate-this{
  width: 300px;
}
#background {
    width: 300px;
    margin: 8%;
}
#instructions {
    padding: 5px;
    text-align: center;
    font-weight: bold;
}

Finally, JS:

startRotation();
function startRotation() {
	if (is_touch_device()) {
		document.getElementById("instructions").innerHTML = "SWIPE TO ROTATE";
	}
	else {
		document.getElementById("instructions").innerHTML = "USE MOUSE TO DRAG AND ROTATE";
	}
	var rotateElement = document.getElementById('rotate-this');
	new Propeller(rotateElement , {
		inertia: 0.99, speed: 10,
	});
}
/* Function to check whether the device supports touch input or not */
function is_touch_device() {
	var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
	var mq = function (query) {
		return window.matchMedia(query).matches;
	}
	if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
		return true;
	}
	var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
	return mq(query);
}

In the above Javascript code, function is_touch_device is used to check whether the device supports touch or not and add the instructions accordingly. Then we pass our rotation element to the Propeller. We are using inertia as 0.99 so that the rotation will stop after a certain duration. If you do not want to stop then simply put inertia as 1. Here is the list of other options you can use for this library:

• angle sets the initial angle
• inertia is the most valuable option. It is a number between 0 and 1. 0 means no rotation after the mouse was released. 1 means infinite rotation. For this demo we use inertia equals to 0.99.
• speed — the initial speed of rotation. It also can be used as property in runtime.
• minimalSpeed — the minimal speed of rotation. Works only if the propeller have inertia between 0 and 1.
• 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. A bit more about easing functions
• onRotate callback executed when rotated. You can easily get the current angle as this.angle inside of callback function.
• onStop callback executed when stopped.
• onDragStart callback executed when start dragging.
• onDragStop callback executed when stop dragging.

You can find this project on GitHub.

@sagar.shrestha