Browsing articles tagged with " 3D"
Nov
29

jQuery Plugin: rotate3Di – Flip HTML content in 3D

By Vinod  //  All, Javascript  //  1 Comment

Rotate3Di is a jQuery Effect Plugin that makes it possible to do an isometric 3D flip or 3D rotation of any HTML content. It also enables custom 3D rotation animations. CSS3 Transforms are used to create this visual “3D” isometric effect. Supported browsers are WebKit, Safari, Chrome, Firefox 3.5+, IE9 (Platform Preview 7+), and probably Opera. The plugin’s functionality includes: setting or animating HTML content to an arbitrary isometric rotation angle, as well as flipping, unflipping, or toggling the flip state of an object.

Demo, Details & Download: http://www.zachstronaut.com/projects/rotate3di/
Jul
21

Smart3D jQuery plugin

By Vinod  //  All, Javascript  //  1 Comment

Smart3D is  jQuery plugin which can create nice & Interesting 3D banner like effect, which can be used on header or banner on site. Its really cool.

To see the effect on move your cursor on banner image on website/demo page.

Download & Demo: http://4coder.info/en/jquery-smart3d-en/
May
27

Cloud Carousel – A 3d Carousel in Javascript

By Vinod  //  All, Gallery, Javascript  //  1 Comment

The Cloud carousel features optional auto-reflections, and the information contained in the Alt and Title tags of the images can optionally be displayed as you hover over each image.

There are some benefits to doing this kind of thing in JavaScript rather than Flash, not least of which is the ease of integration, small file size, SEO, and inherent degradability/accessibility. Not having another dev-tool in the workflow is another plus.

The carousel features realistic perspective. Many 3d carousels only apply perspective scaling to the size of the images, not their positions. This results in disproportionate gaps appearing between items as they shrink in the distance which looks odd.

Features

  • Works with most browsers (tested on IE6+, Firefox, Chrome, Opera, Safari).
  • Accurate 3d perspective.
  • Optional auto reflections – no need to modify your images or add server code.
  • Easy integration with basic valid HTML and a tiny bit of JavaScript.
  • Small 5Kb (minified) script..
  • Degrades gracefully with Javascript turned off.
  • Fully accessible with no CSS or text only browsers.
  • Works with other plugins, e.g. Slimbox, and preserves your links and mouse events.
  • Optional mouse wheel support as of version 1.0.2.
  • It’s completely free.
Website & demo: http://www.professorcloud.com/mainsite/carousel.htm
License Information: MIT License