Sprite3D: simple controls on top of CSS transitions and transforms
Posted by Dion Almaer 9 months ago on css images javascript library
Bob Lemarin has created Sprite3D, a library that “wraps HTML elements with the necessary behaviours to easily control their 3D-position using a simple Javascript syntax.”
Once you create a stage you can place sprites (which wire up to CSS classes) or containers (a way to group sprites) onto it. At that point you can play with the actors on the stage.
For example:
// create the "stage" (root container)
stage = Sprite3D.createCenteredContainer();
// create the container that will be used to rotate its children, and add it to the stage
container = new Sprite3D().setZ(-00).rotateX(-20).update();
stage.addChild( container );
// create front left face
container.addChild(
new Sprite3D()
.setClassName("imageLeft")
.setTransformOrigin( 0, 0 )
.setPosition( -100, -250, 100 )
.rotateY( -45 )
.setRotateFirst(true)
.update()
);
// rotate the container around the X and Y axis, then apply these transformations
container
.rotateY( -3 )
.setRotationX( Math.cos(t) * 15 - 20 )
.update();
The library is a great combination of a simple API and nice examples to help inspire and understand.