felipenmoura.org Web development, HTML5, Javascript, CSS3, PHP and other cool stuff!

Root3D, the CSS3D environment

Hey folks.
I'm here full of proud to introduce you my new experiment/project, the Root3D.

Basicaly, Root3D is a 3D environment running on your webbrowser based on CSS3 3d effects and html5 DIV elements.
No WebGl, no plugin, just your browser working with HTML5 and CSS3. Of course, JavaScript makes everything work together and there is also some server side programming to save and load projects.

This project is participating at Mozilla derby! Vote on it and help me keep it up!

You can use this tool to create your elements and apply 3D effects to them. After that, you can use the browser's console to simply copy the CSS of the element to use it in your page, for example...soon, I'll provie a better way to use the result from your changes.

The first thing I'd tell you, is to check the "gear menu". Its tools are quite useful, specially the help item, which contains the list of shortcuts.
In that menu, you'll see you can load some demos/models I've created to use as example.

Please, notice that Google Chrome has some issues rendering 3D effects! Specialy an annoying bug related to z-index, what stops you from clicking on the menus unless you drag the map aside! Sorry for that! I hope they fix this soon!
On Firefox 11(and 10) it works just fine :)

One of the ideas here is to test the CSS3 3D effects, filters and transforms...annimations as well...and then, have a place where to retest it once the webbrowsers have been fixed. I believe this will help us a lot, identifying bugs and understanding what's happening :)
I really would enjoy a lot if Browser's vendors could get in touch and tell me what they think, what could be done to make it better or to fix problems, and of course, ideas are quite welcome!
If you want to contribute, the source code(which I have to say, I'm still not THAT proud yet...I think it has lots to get better, mainly because I started this way smaller and it just got bigger!) is available at github here:
https://github.com/felipenmoura/Root3D

Here, watch some videos I made:

In this video you can see some abstract elements been added

And in this second video(the nicer one, I think) you can see a demo of the result you may get with this tool:

You can sign in using your Google Account to save or load projects of yours, but you can simply give it a try.
Either way, you can load some cool models...and if you create something really cool, let me know and I may add it as another model for everyone to see it! :)
We'll find a way to keep your credits, of course!

Enough talking! Access the Root3d project itself!
Root3D, the CSS3D environment

Ok...now...it's time for you to give me some feedback! Let me know your opinion...let's use it and find bugs in both this tool and browsers to make them all better!

All feedback is very welcome!