Best jQuery Rotate Image Plugins & Tutorials with Demo

    View360 – 3D & 360 degree product viewer

    View360 - 3D & 360 degree product viewer

    By using View360 it’s easy to show any product in 3D of 360 degree rotation. It’s responsive and support all mayor devices and browsers. View360 is built for both: professional ecommerce industry and small online stores. Preloader, simple navigation, automated rotation, inertia, are only few of many options available for fine tuning the product view and behavior.

    • 3D and 360 degree rotation
    • Fixed, responsive and light box layout
    • In page, full screen and full viewport modes
    • Retina ready
    • Simple navigation for best user experience
    • Native HTML5 & JavaScript
    • Auto and manual rotation
    • Zoom and Pan
    • Auto rotation speed
    • Mousemove/touchmove sensitivity
    • Preloader text, color and size
    • Optional full sized image load on zoom
    • Auto rotation direction and speed
    • Setting concrete zoom steps

    Guillotine : jQuery Image Crop Zoom Rotate Plugin

    Guillotine : jQuery Image Crop Zoom Rotate Plugin

    Guillotine is a jQuery plugin that allows to drag, zoom or rotate an image to select a cropping area. Like selecting the display area of a profile picture or avatar.

    • Responsive: The window (or selection area) is fully responsive (fluid).
    • Touch support: Dragging the image also works on touch devices.

    jQuery Rotate : Plugin that Rotate Images by any Angle

    jQuery Rotate : Plugin that Rotate Images by any Angle

    jQuery plugin that rotate images (and animate them) by any angle.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. An experimental version 3 tries to rotate all objects, but with some small issues.

    Multirotation : jQuery plugin to Rotate page elements by a given Angle

    Multirotation : jQuery plugin to Rotate page elements by a given Angle

    This object is a jQuery plugin to rotate page elements by a given angle. It can set CSS style properties to make a given element appear rotated by a given angle. It may set proprietary style properties depending on the browser to make it work in different browsers.

    It can also set a rotation speed that defines the rate by which the element rotation angle is updated in browsers that support rotation animation.

    Create a Pentagon Hover Effect with CSS3 and jQuery

    Create a Pentagon Hover Effect with CSS3 and jQuery

    This is a new series that will focus on cool web elements on the web. My goal is to try and replicate these sleek elements using a combination of HTML, Javascript and CSS3 and hopefully teach something along the way. It’s a portfolio site that implements a cool pentagon hover effect for displaying his work. It smoothly meshes together a rotate effect with a slight nudge right to the image along with a colorization of the image. Note: This is using CSS3 Transitions which is still not completely standard and browser compatibility may be limited.

     

    jQuery.utSticker : Add and manipulate a DOM Node as a sticker

    jQuery.utSticker : Add and manipulate a DOM Node as a sticker

    The utSticker component lets you move and rotate a DOM Node on top of other elements, to add a sticker into your Expression. This component manages its data automatically by default. It saves and initializes the sticker data using post.storage content and a key based on its name or DOM ID.

    3D Shading with Box-shadows in CSS3

    3D Shading with Box-shadows in CSS3

    When working with 3D transformed elements, you might notice that they don’t have any shading and appear to be very flat. In real life, objects block light and have shadows. Surfaces can be matte, reflective, and everything in between. Indeed, we can do better.

    If you need to cast light onto complicated geometry, there are options available such as Photon, but they’re very processor intensive. In this article, I’ll show you a solution that can be applied to objects that only have a few faces. Our example will be a 3D movie gallery with glossy posters and, when the posters are rotated, the sides will contain matte information cards with meta data about the film.

    Panoramic : jQuery Full Screen Street View Rotator

    Panoramic : jQuery Full Screen Street View Rotator

    Panoramic is a javaScript library allows you to use Google Street View in the background of the web page. For desktops devices panoramas can rotate automatically, for mobile device shows a static image of this panorama. Included is a background layer pattern ready for use.

    Features:

    • Responsive panoramas
    • Support Retina display
    • 20 background patterns
    • Support mobile device
    • Cross Browser Compatible
    • Full screen

    jQuery Aperture : Rotate all kinds of elements clockWise

    jQuery Aperture : Rotate all kinds of elements clockWise

    Rotate all kinds of elements clock- or counterclockwise with jQuery Aperture.

    Spice up your personal site with jQuery

    Spice up your personal site with jQuery

    In this tutorial I will taught how to take a personal site with a common text document layout, and create something far more interesting with the jQuery Scroll Path plug-in .We’re going to use one of my own plug-ins, jQuery Scroll Path, as a tool to transform a conventional site layout into something that resembles an interactive presentation. The sections of the page will be spread out and rotated across a two-dimensional plane, and bound together with a path that the browser window follows when the user scrolls the page.