November 2, 2011
Since the dawn of the web, one of the most sought after things in web page development is to utilize the third dimension. Barring the use of Flash, Java or specific plugins, drawing things in 3d natively on the page was only possible in our imagination. It’s high time though, to break the boundaries of imagination.
With the advent of the CSS3 specification, styling elements in 3d is not only a possibility, but also a 5ml reality. Slated for version 1.6, all of 5ml’s widgets will have an option to be positioned and transformed in three dimensions. You will be able to control an element’s X/Y/Z offset, X/Y/Z rotation, Horizontal and Vertical skewing, Horizontal and Vertical positioning of the point of origin and backface visibility. Additionally, the “Container” widget will also support perspective, and perspective origin values for its children elements, acting as a 3d stage.
A cube made in 5ml
Support for 3d transformations is still in its infantile state, as only webkit powered browsers are able to display CSS3 3d content (namely Chrome and Safari for desktops, iOS enabled devices as well as the Android Browser version 3.0 and up), however Internet Explorer and Firefox have announced that they will also support 3D transforms in their 10.0 versions.
Let’s look at a quick and “dirty” 3d example, how to create a cube.
I dragged a container widget in the scene and changed its “Perspective” property to 800, which is an average value in order to give a good depth perception. This will act as my 3d stage. Inside it, I dragged another container widget, which will hold all 6 of my cube’s faces. Using a container in that way will help me manipulate all the elements that will be used to create the cube as one object. There is no need to add a perspective value to the child container, as it inherits the value from the parent container. I’ll name this “Cube” for easy reference.
Following that I start building my cube. I drag another container within the “Cube” container and start fiddling with its style properties to make it stand out a bit. A linear and diagonal gradient, a fat, double and rounded black border, low opacity so I can see through it and finally I add a Label widget inside it to write something inside the face. It could of course be anything there, a solid color, an image/texture, a video player, a text area or any other widget. I set the width and height of the container at 200 pixels (hey, it’s always nice to work with round numbers), and then fiddle with the Z offset in order to move it about 100 pixels to the front. I do this in order to build my cube “around” the “Cube” container, and not “behind” it.
3D properties pane
Sequentially, I copy and paste that face 6 times, each time fiddling with the new face’s rotation and offset in order to place it in the correct side of the cube. I also change the gradient color and the text for varriety.
Finally, after all 6 faces are in place, I go back to the “Cube” container and start playing around with the rotate, offset and skew values, until my cube looks good in space for a “photo” opportunity.