In the line of other CSS3 and controls experiment, here is the JogWheel class for Mootools, made entirely of HTML, CSS3 and of course javascript.

You can see the preview of the example below (for people without CSS3 support) in the form of an Amp-like feature.

Read on for the interactive example and the code to produce this.

All the code is available in the SVN.

I thought I'd start using CSS3 a little and I wanted to make a menu that looked a bit different than usual. The budding menu lays items in circles that exclude each other.

You can find the script in the SVN ; I've tried to comment it carefully to make easier to adapt to your own situation.

The circles are rendered with CSS3 (Mozilla and Webkit), the nice font on the text with FLIR, and of course the script was made with Mootools.

I'd love to see some real-world examples so drop me a comment if you have a live example.

Read more to see the example in action, it may take a while to load in your browser due to all the DIVs being added on-the-fly and FLIR.

It's taken long enough but it's finally here: Mootools Fx for Moo3D (the 3D engine)!

You can see an application at the top of the page - the revisions scroller (use the mouse wheel to scroll between revisions).

What does it mean pratically? If you know the current Mootools.Fx, then you must know that it allows you to transform the CSS properties of an element with a nice transition and a whole bunch of parameters. The problem here was that I didn't want it to change CSS properties, but 3D properties (basically points' coordinates).

As of now, you can move an entire object (a series of points) by the provided values, meaning you cannot specify starting values or target values (these will get calculated based on the starting coordinates of each point and the provided values). An interesting side effect of Moo3DFx is that you can also apply an effect to the camera itself or the rotation axis of your scene, since they're pretty much points too.

Read further for details on how to use it, and go to the SVN to get the latest version (or just download it here).

The example, a carousel-like feature, just click and see Moo3DFx in action:

After a lot of time wasted dealing with my hosting service, I've finally managed to get the SVN up and running! It's got read-only public access so you can checkout anything, the address is http://svn.grownseed.net/grownseed/.

For easier access, I've also managed to integrate WebSVN to Joomla with MooTools and some AJAX magic, have a look on the projects page. WebSVN is a really good SVN browser made in PHP and I would gladly recommend it.

If anybody is interested in integrating an SVN browser to their site (and in particular Joomla), leave a comment and I'll make my script available. I'm also planning on creating a proper port to Joomla that I'll add to the SVN.

Here's the first project on Grownseed, a basic 3D engine made with MooTools. For those of you who have never heard of MooTools, it's a Javascript framework that makes life much easier. The engine was originally based on the work of Devirtuoso as you can see here with JQuery. I've tried to take it further by making it a bit more versatile, particularly by making the CSS modifiers totally customisable and by making the rendering slightly more efficient. It's also very compact (at the moment anyway) and works with MooTools 1.11 (for the Joomla users) as well as MooTools 1.2.*.

I put it together as a proof of concept more than anything else, but I'd like to see people find a proper use for it. Have a look at the example below for a better idea, and if you want to see how to use it, read on.

Any suggestions are welcome, if you want to use it click here to get the engine and this example.

You can move the mouse around to change the camera (within the boundaries of the div below), you can also use the mouse wheel to trigger an animation (or similarly the up and down keys).