Rotate and Fly off elements with jQuery and CSS3

In this post, we will look at how we can use CSS3’s property transform and other vendor-specific properties to rotate elements and finally fly them off the page with jQuery. We will also use setInterval function of javascript for the continuous animation or rotation of the elements. So let’s get started with it.

Rotating Elements

To transform/rotate elements, there is a CSS3 property transform, here is the syntax of it:

transform: rotate(Xdeg)

Where X can be any number denoting the amount of rotation/angle. For example:

transform: rotate(90deg)

Any element applied above rule, will transform to 90 degrees.

Continuous Rotation

To rotate elements continuously, we can use the setInterval function of javascript along with some math. Check out the demo below:

Rotating Elements with jQuery & CSS3

The code of interest for the rotation is as follows:

$('.rotate').click(function(){
	var interval = null;
	var counter = 0;
	var $this = $(this);
	clearInterval(interval);

	interval = setInterval(function(){
		if (counter != -360) {
			counter -= 1;
			$this.css({
				MozTransform: 'rotate(-' + -counter + 'deg)',
				WebkitTransform: 'rotate(' + -counter + 'deg)',
				transform: 'rotate(' + -counter + 'deg)'
			});
		}
	}, 10);
});

Here I assume you know the basics of jQuery like ready handler, class and id selectors, etc. I have explained those things in my other posts, so I won’t be discussing them but instead I will concentrate on the part of the code which is responsible for the rotation.

First of all, we assign a click handler to each element with the class of rotate. Later we create the necessary variables including $this equalized to $(this) meaning the current clicked element, this is useful because we will reference this variable later in the setInterval function. As an element gets clicked, we also stop the current animation or clear the time interval using clearInterval function.

Later inside setInterval function, we decrement the variable counter by one with each 10th Milli-second passed (the second argument specified to the setInterval function). I have specified lesser time so that animation is little faster. The reason why I decrement the value of counter is that I wanted to rotate the elements in anti-clock-wise direction. This variable keeps on decreasing until it reaches -360 specified above in the if condition meaning that our element has rotated completely and has come back to its original place.

Now since we have put transform CSS3 property in the setInterval function and $this refers to current clicked element, the element starts rotating with continuous animation because counter variable has been specified as the degree of rotation:

transform: 'rotate(' + -counter + 'deg)'

Note that MozTransform and WebkitTransform are vendor-specfic CSS3 properties of Mozilla and Webkit (Chrome and Safari) browsers.

I have also created javascript version of rotating elements which can be seen here:

Rotating Elements with JavaScript & CSS3

So that is all there to rotating the elements in continuous fashion. Next we will see how with slight modification we can fly the elements off the page.

Flying Elements Off the Page

To fly elements off the page, we use jQuery’s animate method like this:

animate({left: '+=' + counter + 'px'}, 40);

That one single line is needed to fly off elements off the page, we add this line to our previous code just after we applied CSS3 properties like this:

$('.rotate').click(function(){
	var interval = null;
	var counter = 0;
	var $this = $(this);
	clearInterval(interval);

	interval = setInterval(function(){
		if (counter != -360) {
			counter -= 1;
			$this.css({
				MozTransform: 'rotate(-' + -counter + 'deg)',
				WebkitTransform: 'rotate(' + -counter + 'deg)',
				transform: 'rotate(' + -counter + 'deg)'
			}).animate({left: '+=' + counter + 'px'}, 40);
		}
	}, 10);
});

It is time to check out the demo:

Fly Off Elements with jQuery & CSS3

Here, we have basically specified left property of CSS to the animate method so that elements flies away to the left. You could also specify top to fly elements away to to the top. In fact, you could specify many other CSS properties to animate method such as width, height, margin, etc. Generally, you can specify any CSS property to animate method that can be specified in pixels values or in other words that could be increased or decreased.

Now that we have seen how to rotate elements and fly them off, it is up to you how you can take the idea and use in your cases. I suspect there could be  quite some ways we can use this technique effectively. I might come up with something fancy in my future posts while using this technique. As a last example, here is one idea to delete elements while flying them off the page:

Deleting Elements while Flying them off the Page

Browser Compatibility

The transform property works in all modern and standard-compliant browsers. It does not however work in IE, however there exist alternative when it comes to IE which is using IE-specific transformation filters you might want to consider for the rotation purpose. Here is IE-specific example:

#myElement {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

The value for the rotation can be either 1, 2, 3, or 4. Those numbers represent 90, 180, 270, or 360 degrees of rotation respectively.

There also exists cssSandpaper, the CSS3 Javascript library comes in handy when you want transformations to work across all browsers.

I hope you came to know about something useful you can put to use in your own ways.