<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.
x, y, z rotationX, rotationY, rotationZ scaleX, scaleY, scaleZ width, height alpha●Lots of accessor methods :
setPosition(x,y,z) setX(x) setY(y) setZ(z) move(x,y,z) moveX(x) moveY(y) moveZ(z) setRotation(x,y,z) setRotationX(x) setRotationY(y) setRotationZ(z) rotate(x,y,z) rotateX(x) rotateY(y) rotateZ(z) setScale(x,y,z) setScaleX(x) setScaleY(y) setScaleZ(z)●AS3-style scenography via the
addChild() and removeChild() method, children inheriting of their parent's transformations
●JS-style method chaining :
new Sprite3D()
.setPosition(x,y,z)
.setRotation(rx,ry,rz)
.setClassName('class')
.update();
●Basic support for sprite sheets. At this point, all the tiles must have the same size (for one Sprite).
/* CSS : */
.spriteClass {
background: url("img/sheet.png");
width: 32px;
height: 64px;
}
/* JS : */
// one-time set-up :
mySprite.setClassName("spriteClass").setTileSize( 32, 64 );
// then, later :
mySprite.setTilePosition( 0, 3 );
●Easily manipulate the underlying DOM elements with the domElement and style properties. There's also a bunch of helper methods like setClassName, getClassName, addClassName, removeClassName, setId, getId, setCSS, getCSS and setInnerHTML that let you keep your CSS workflow
●Check for browser support using the Sprite3D.isSupported() method
