Home of:

5ml, Developer Resources

2B, 3D, C4…

0
Sotiris Frontend Developer | 5ml
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.

Following that, I can add some minimal javascript code to animate the cube in 3d or make it reactive to mouse movements and clicks, but more about that once version 1.6 is out.

 

 

Leave a Reply

 

See What People
Are Saying

tmobile-logo

“T-Mobile was able to delight customers with a fun game that could work across virtually any phone, with Velti making it possible. Velti was great to work with & their commitment to the success of the program was excellent.” - Chad Hodge, T-Mobile USA

Pic Stitch_logo

“The thing I love about Mobclix is its simplicity--sign up & you have instant access to over 35 ad networks. Not only that, but I’ve already seen a 400% increase in revenue from March, and 12M impressions a week!” - Alex Keim, Creator of Pic Stitch, Big Blue Clip  

Halfbrick

"Mobclix greatly helps manage & control the quality of our ads, and as a result, our Fruit Ninja app made over $400,000 in April 2012 alone off of ad-network sales." - Jared Oats, Advertising Manager, Halfbrick

tinyco

“TinyCo is thrilled to be working with the Velti Exchange—we’ve seen great results from the campaigns we’ve run so far and are excited about the future of our relationship!” - Growth & User Acquisition Team, Tinyco

mtc_logo_n

“We strongly believe that mobile marketing and advertising is here and we have already taken the first successful steps in partnering with Velti in this new era for the mobile industry.” - MTC Russia

mbcgroup

“Velti has shown consistent respect for policies and procedures, in addition to designing and implementing the campaigns. We look forward to continuing this fruitful cooperation in the future.” - MBC Group

Follow us

 

Who is Velti?

Subscribe to Newsletter