Sprite3D.js

a small library for generating
and manipulating CSS 3D transforms

NOTICE:

This page is slowly getting outdated. In my spare time, I've been working on a major syntax revision, Firefox compatibility issues and a new version of this page.

Until I get the time to finish all of this, here's a list of the most up to date resources :

Overview

Sprite3D wraps HTML elements with the necessary behaviours to easily control their 3D-position using a simple Javascript syntax. To create a Sprite object, you can either supply an existing DOM object or let the library create an empty <div> (you can apply a CSS class to the DOM element after its creation).

As you manipulate "real" HTML elements, you don't need a <canvas> object (and its performance problems), nor a WebGL-enabled browser. And, as 3D transforms are hardware-accelerated, you can get a very decent framerate, even on mobile devices.

3D positionning is achieved via CSS3 3D transforms, which are currently supported by WebKit (Chrome, Safari, iOS, Android 4, BlackBerry) and Firefox 10. Internet Explorer 10 should ship with 3D support, too.

However, due to its wrapping, non-intrusive nature, Sprite3D.js allows for building semantically valid HTML pages, adding the animation layer afterwards, achieving a valuable progressive enhancement effect.

Sprite3D.js has no dependencies, so it can easily be integrated with other JS libs.
It is provided under the MIT Licence.

Main Features

Examples

I'm so sorry !
It seems that your browser does not support CSS 3D transforms.
Please try to view those examples with a recent webkit-based browser, like Chrome or Safari, or you might get strange results...

Current dev status

See the above notice.

Download

Get the full project source code on GitHub.

Don't forget to check the "v2" branch with its revamped syntax.

Documentation

The source code has been commented using the jsDoc syntax. Here is the generated reference page (which is also included in the github package).

Credits

Sprite3D.js has been created by boblemarin (@)

Thanks to Grant Skinner's TweenJS, MrDoob's Stats utility, Paul Irish's requestAnimationFrame code, Shane Becker and Daniel Rench for the house cleaning on github, Pixeline and Kooka for their support, and Christian Delfosse for fixing the 15 Puzzle stuff.

Social stuff

Tweet