Hit enter after type your search item
Home / jQuery / jQuery rotate animation using CSS3 transform: 4 demos

jQuery rotate animation using CSS3 transform: 4 demos

The rotate animation by using CSS3 and jQuery

The jQuery rotate plug-in can be used for creating animations in different elements of the web page including images, icons or other elements quite easily.

This is a light-weight plug-in, only 1Kb of JS file. So, if you are already using jQuery in web project then creating rotating animations is quite easy by including a simple JS file.

Have a look at demos in the following section where you may see and get the code.

A demo of animating image

In this demo, an image is used for jQuery / CSS3 animation. The plug-in uses CSS 3 transform property where the degree of rotation is specified as per option’s value given in the jQuery code.

You may use easing option for specifying the type of animation as well. Have a look:

jQuery animation

See online demo and code

Apart from jQuery and jQuery-easing JS files, you only need to include the JS file of the plug-in above the </body> tag:

<script src=”http://code.jquery.com/jquery-2.2.3.min.js”></script>

<script src=”http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js”></script>

<script src=”js/jquery-rotate/rotate.js”></script>

The markup is simple:

 


 

Just use the ID used in <img> tag in the jQuery code where animation in jQuery is initiated along with specifying different options:


 

The code specifies the type of easing i.e. easeOutExpo. You may use different; the list can be seen here. Besides, duration of the animation and rotate values are also set. The rotate value is used by CSS 3 transform property in the plug-in JS file.

A demo with different ease and animated values

In this example, using the same image as above but with different values for duration, rotate and easing. The easing value is swing, the duration is 3000 milliseconds and CSS 3 rotate is 3000.

See online demo and code

The script used is:


 

A demo of rotating text to vertical angle

As mentioned earlier, you may not only use images but other elements of the web page by using rotate jQuery/CSS 3 plug-in. In this demo, some text with shadow effect is created with Bootstrap classes.

The text is rotated to 270 degrees angle, so it will be vertical at the end. The duration is kept two seconds for the animation to complete.

CSS3 animation

See online demo and code

 

The markup:


 

The script:


 

Get the complete code, including style from the demo page.

A demo of rotating Bootstrap buttons with font-awesome

In this example, animated button based on Bootstrap classes are created. As you click any button, it will rotate by using the rotate plug-in. Different buttons are given different options and values for duration, easing, and angle:

CSS3 animation button

See online demo and code

As buttons are using the icons from the font-awesome library, its CSS file is included in the <head> section.

Get the complete code from the demo page.

Credit: clarketm

This div height required for enabling the sticky sidebar