Best jQuery Rotate Image Plugins & Tutorials with Demo

    fabric.js : JavaScript Html5 Canvas Library

    fabric.js : JavaScript Html5 Canvas Library

    Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. It is also an SVG-to-canvas parser.

    Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes — rectangles, circles, ellipses, polygons, or more complex shapes consisting of hundreds or thousands of simple paths. You can then scale, move, and rotate these objects with the mouse; modify their properties — color, transparency, z-index, etc. You can also manipulate these objects altogether — grouping them with a simple mouse selection.

    jqueryrotate : jQuery plugin that rotate images by any angle

    jQuery Rotate Plugin

    This is a small plugin for jQuery that adds a nice feature to rotate images (img html objects) by a given angle on web pages. This is a simple plugin to allow you to rotate images (any angle) directly on client side (for ex. user generated content), and animate them using own functions. Main focus is to unify this behavior across different browsers.

    Dopeless Rotate : jQuery Plugin for 360 degrees product view

    Dopeless Rotate : jQuery Plugin for 360 degrees product view

    Dopeless Rotate is Jquery plugin for 360 degree product visualisation. It features:

    • Zooming function
    • Support of touchscreen devices
    • Ability to use multiple instances on a single page
    • You can use every number of images for 360 degree visualisation you want
    • Images are loaded automatic via PHP
    • Preloader is showing the progress of loading images to cache
    • Preloader for loading zoomed image
    • Nice modern design

    360 panorama for jQuery

    360 panorama for jQuery

    A plug-in that turns an array of images into a 360 degrees interactive view that can be rotated at will.

    Features:

    • method… can be “click”, “mousemove” or “auto”
    • sensibility to adjust rotation speed
    • autoscrollspeed to adjust the speed when method “auto” is selected (lower number gives faster rotation)
    • parameter direction can be either “forward” or “backward” depending on how your photos were taken and how you want them to appear
    • cycle (see demo) (new in 0.2)
    • Preload images
    • Display a progress bar expressing loading progress

    3D CSS3 Book Generator with jQuery

    3D CSS3 Book Generator with jQuery

    Today we made up my mind to develop something really interesting and useful for you. A new jQuery plugin – as a generator of books. The main idea is to display user friendly book basing on raw text (with images). The book consists of pages, each page consists of 2 sides (as in a usual book), there are buttons Back-Next at the sides of pages to navigate through the pages, and when we turn the pages we see that the pages are turned in 3D (powered by CSS3). In order to achieve this 3D effect we use CSS3 transform (rotate3d, preserve-3d and rotateY) and transition effects.

    Triple Panel Image Slider in jQuery & CSS3

    Triple Panel Image Slider in jQuery & CSS3

    In this tutorial we will create a jQuery triple panel image slider with a 3D look. The idea is to have a main panel and two lateral panels that are rotated slightly in 3D space. When navigating, we will slide in the respective next image in each panel. We’ll be using CSS 3D Transforms with perspective and CSS Transitions.

    Rotating Feature Boxes with jQuery & CSS3

    Rotating Feature Boxes with jQuery & CSS3

    The full effect of it (with transition animations) will work in newish WebKit and Opera browsers and Firefox 4 above. Any other browser will rotate the blocks without transition animation.

    All the animation is CSS3 transitions. JavaScript only watches for the clicks and applies and removes classes as needed. Why not use JavaScript for the animations as well and get wider browser support? CSS3 is far better suited for this. The animations are better (hardware accelerated). It doesn’t slow down other JavaScript. It is also easier to write keeping the animations in CSS. With JavaScript we aren’t able to animate to classes* easily.

    3D Flipping Circle with CSS3 and jQuery

    3D Flipping Circle with CSS3 and jQuery

    In this tutorial we will create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.

    Today I would like to show you how to create a little component with a realistic touch. The idea is based on the sweet paper effect found in the video of the Google Developer Stories. Maybe you have created these kind of paper effects when you were a kid; basically something opens or rotates when pulling or pushing some handle.

    We’ll create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.

    Swatch Book with CSS3 and jQuery

    Swatch Book with CSS3 and jQuery

    A tutorial about how to create a swatch book like component that let’s you open and rotate the single swatches revealing some details. We will be using CSS transforms and transitions and create a simple jQuery plugin.

    Today’s tutorial is about creating an animated swatch book using CSS rotation transforms and JavaScript. The idea is to show a swatch book like structure and make the single swatches or “sheets” clickable. When clicking on a swatch, we’ll rotate the other swatches in order to reveal the selected one.

    Polar Gallery in jQuery

    Polar Gallery in jQuery

    This item is an interactive, animated, Polaroid alike gallery. You can use this plugin to easly build a cool-looking gallery or a stand-alone nice photo.

    • User can navigate throught the gallery using arrow keys.
    • Navigation can be turned off if You do not want it.
    • Photos can be rotated by the given or by the random degree.
    • You can define maximal photo rotation and it’s zoom scale (to do not show the image which doesn’t fit the browser window).
    • Every photo can have it’s title and subtitle.
    • You can define an URL on which user will be redirected after clicking a zoomed photo.
    • Photo’s subtitle can be a link as well.