My take on famo.us-like experiments.
It offers an API for generation, positioning and animation of div elements in 3D space. They get positioned and animated via CSS3 matrix3d transforms, which are calculated by your browser's JavaScript engine with the aid of the excellent gl-matrix library. No CSS transitions are used - animations are performed in JavaScript too.
The purpose of the project is to allow the creation of 3D experiences in desktop and mobile browsers. Notice that you're limited in the geometry that can be presented - there are:
- 3D transformed divs (which may receive regular HTML layout such as paragraphs, images, forms, and other HTML elements)
- axis-aligned divs (such as trees, human figures)
- camera-algined divs (such as lens flares and other common special effects)
In time, helper abstractions will be offered to model common cases (ex: a box).
- a decent browser with 3D acceleration (google chrome / safari)
- workflow is orchestrated with Makefile (wow!)
sudo apt-get install cmake
- CSS is generated from LESS using lessc
sudo npm install -g less
- Code is minified with uglifyjs
sudo npm install -g uglify-js
- Code is validated with jshint
sudo npm install -g jshint
- Documentation is generated with yuidoc
npm -g install yuidocjs
- Debug version is generated with Douglas Crockford's jsdev tool
If you have the proper tools (wget|curl and gcc) the makefile should fetch and compile jsdev for you :)
Works well on Google Chromes and mobile Chrome for Android 4.x. In time, with the maturity of the library, we'll support officially other browsers.
There are 3 flavours:
- div3d.bundle.min.js - minified source
- div3d.bundle.js - regular source
- div3d.bundle.dbg.js - source which additional checks for API arguments and the like
You should start by using the debug bundle. Switch to the min bundle at production time.
Don't forget to add the div3d.css file too!
Take a peek at the samples and make use of the API documentation.